【Echarts】Configuration item series

1. line

Line charts and area charts can be used in rectangular coordinate systems and polar coordinate systems. Area charts can be drawn after setting areaStyle.

  • type: line, must-see
  • colorBy: The strategy for picking colors from color, which can take the values ​​of series (colors are assigned according to series) and data (colors are assigned according to data items), which are generally not written.
  • coordinateSystem: the coordinate system used, which can take values ​​of cartesian2d (rectangular coordinate system), polar (polar coordinate system)
  • xAxisIndex, yAxisIndex, polarIndex: select axis
  • showSymbol: Whether to display the mark, usually a small dot
  • showAllSymbol: only valid when the main axis is the category axis, Boolean value
  • symbolXXX: attribute of the mark
  • legendHoverLink: Whether to enable linkage highlighting when legend hovers.
  • stack: Data stacking. Series configurations with the same stack value on the same category axis can prevent stacking. Only supports stacking on numerical and logarithmic axes.
  • stackStrategy: The strategy for stacking values, stack must have been set. Optional parameters samesign (only stack if the value to be stacked has the same positive and negative sign as the currently accumulated stacked value), all (stack all values), positive (only positive values ​​are stacked), negative (only negative values ​​are stacked) )
  • cursor: the mouse style displayed when the mouse is hovering
  • connectNulls: whether to connect empty data
  • clip: whether to clip graphics that exceed the coordinate system
  • step: whether it is a step line graph, Boolean value, string: start, middle, end
  • endLabel: the label of the discounted endpoint
    • distance: distance from graphic elements
    • valueAnimation: whether to enable digital animation of the label
    • show, rotate, offset, formatter, textStyle attributes
  • labelLine: visual guide line configuration of the label
    • showAbove: whether to display above the graph
    • length2: the length of the second segment of the visual guide line
    • smooth: Smooth visual guide lines
    • minTurnAngle: By adjusting the length of the second segment of the line, limit the minimum angle between the two ends of the guide line to prevent the display from being unsightly due to too small an angle.
    • show、lineStyle
  • labelLayout: unified layout configuration of labels
    • hideOverlap: whether to hide overlapping labels
    • moveOverlap: Whether to move the label position when the labels overlap to prevent overlap. Optional parameters shifyX, shiftY
    • x: x position of label
    • y: Same as above
    • dx: The pixel offset of the label in the x direction, can be used together with x
    • dy: Same as above
    • rotate、width、height、align、verticalAlign、fontSize、draggable、labelLinePoints
  • smoothMonotone: Whether monotonicity is maintained in one dimension after discounted smoothing, usually used on double value axes
  • Sampling: The downsampling strategy of the line chart when the amount of data is much larger than the pixels. The parameters lttb (to ensure the trend, shape and extreme value of the line after sampling to the greatest extent), average (to take the average of the filtered points), max (to remove The maximum value of the filter point), min, sum
  • dimensions: defines the information of each dimension in the series data, never used
  • encode: Define which dimension of data is encoded into what, never used
  • seriesLayoutBy: specifies whether the data should be mapped to the series in rows or columns, and can take the values ​​of column and row.
  • datasetIndex: Specify which dataset to use
  • dataGroupId: the group ID common to all data in this series
  • data : array of data content in the series
    • name : data item name
    • value : the numerical value of a single data item
    • groupId: the group ID of the data image
    • symbolXXX、label、labelLine、itemStyle、emphasis、blur、select、tooltip
  • markPoint: chart annotation
    • symbolXXX、silent、label、itemStyle、emphasis、blur、data、animationXXX
  • markLine: chart mark line
    • Same as above
  • markArea: Chart icon area, often used to mark a certain range of data in the chart
    • Same as above
  • universalTransition: global transition animation related configuration
  • id、triggerEvent、label、itemStyle、lineStyle、areaStyle、emphasis、blur、select、selectedMode、smooth、zlevel、z、silent、animationXXX、tooltip

2. bar

Column chart, bar chart

  • type:bar
  • roundCap: whether to use arc effects on both sides of the circular column, only valid for polar coordinate system histograms
  • realtimeSort: whether to enable real-time sorting
  • showBackground: whether to display the background color of the bar
  • backgroundStyle: Column background style
    • itemStyle related
  • stack: data stack
  • stackStrategy: data stacking strategy
  • barWidth: The width of the bar, not set to be adaptive, numerical value, percentage string
  • barMaxWidth、barMinWidth、barMaxHeight、barMinHeight
  • barGap: distance between bars of different series, percentage string
  • barCategoryGap: distance between columns in the same series
  • large: Whether to enable large data volume optimization
  • largeThreshold: threshold for turning on drawing optimization, numerical value
  • progressive: The number of graphics drawn in each frame during progressive rendering. When set to 0, progressive rendering is not enabled and supports separate configuration of each series. Numerical type
  • progressiveThreshold: The threshold for the number of graphics to enable progressive rendering. Progressive rendering is enabled when the number of graphics in a single series exceeds this threshold. Numerical type
  • progressiveChunkMode: sharding method, optional values ​​​​sequential (sharding according to the order of data), mod (modulo sharding), never used
  • data
    • name : data item name
    • value : data item value
    • groupId: the group ID of the data item
    • label、labelLine、itemStyle、emphasis、blur、select
  • clip: whether to clip graphics that exceed the coordinate system
  • id、name、colorBy、legendHoverLink、coordinateSystem、xAxisIndex、yAxisIndex、polarIndex、label、labelLine、itemStyle、labelLayout、emphasis、blur、select、selectedMode、sampling、cursor、dimensions、encode、seriesLayoutBy、datasetIndex、dataGroupId、markPoint、markLine、markArea、zlevel、z、silent、animationXXX、universalTransition、tooltip

Three, pie

Pie charts are mainly used to show the proportion of different categories of data in the total. It can also be displayed as a Nightingale chart by configuring roseType.

  • type:pie
  • geoIndex: The index of the geographical coordinate system used, but it is useful when there are multiple geographical coordinate systems in a single chart instance.
  • calendarIndex: index of calendar coordinate system
  • selectedOffset: offset distance of the selected sector
  • clockwise: whether clockwise
  • startAngle: starting angle
  • minAngle: the minimum mountain angle to prevent the value from being too small and causing the sector to be too small and affect interaction.
  • minShowLabelAngle: For sectors smaller than this angle, the label will not be displayed
  • roseType: Displayed as a Nightingale chart, two modes are available: radius (the central angle of the sector shows the percentage of the data, and the radius shows the size of the data), and area (the central angle of all sectors is the same, and only the radius shows the size of the data)
  • avoidLabelOverlap: Whether to enable the prevention of label overlap strategy
  • stillShowZeroSum: whether to still display sectors when the data is 0
  • percentPrecision: The precision of the pie chart percentage value, with two decimal places retained by default, numerical type
  • showEmptyCircle: Whether to display a placeholder circle when there is no data.
  • emptyCircleStyle: placeholder circle style
    • itemStyle properties
  • center : center coordinates of the pie chart, numerical array, percentage array
  • radius : the radius of the pie chart, numerical value, array
  • data
    • name、value、groupId、selected、label、labelLine、itemStyle、emphasis、blur、select、tooltip
  • The rest is the same as above

4. scatter

Scatter plots, bubble charts. Can be used in rectangular coordinate system, polar coordinate system, geographical coordinate system.
Scatter plot on rectangular coordinate system can be used to show the relationship between x and y of data.

  • type:scatter
  • data
    • name、value、groupId、symbolXXX、label、labelLine、itemStyle、emphasis、blur、select、tooltip
  • The rest is the same as above

5. effectScatter

Scatter chart with ripple effect animation, which can visually highlight certain data that you want to highlight by using animation effects.

  • type:effectScatter
  • effectType: special effect type, only ripple (ripple)
  • showEffectOn: Configure when to display special effects. Optional parameters render (after drawing is completed), emphasis (when highlighted)
  • rippleEffect: ripple effects related configurations
    • color: color of ripples, default scatter color
    • number: number of ripples, numerical type
    • period: animation period, unit second, numerical type
    • scale: maximum scaling ratio of ripples, numerical type
    • brushType: ripple drawing method, optional stroke, fill
  • The rest is the same as above

6. Radar

Radar charts are mainly used to represent multi-variable data, such as attribute analysis.

  • type:radar
  • symboXXX
  • data
    • name、value、groupId、symbolXXX、label、labelLine、itemStyle、emphasis、blur、select、tooltip
  • The rest is the same as above

7. tree

Number graph is mainly used to visualize tree data structures. It is a special type of hierarchy with a unique root node, left subtree and right subtree.

  • type:tree
  • zoom: zoom ratio of the current perspective
  • layout: There are two types of layout of digital graphs: orthogonal and radial.
  • edgeShape: only valid in orthogonal layout. The shape of the edge is composed of curve and polyline respectively.
  • edgeForkPosition: only valid in polyline shape, the position where the polyline segments in the subtree branch.
  • Roam: Whether to enable mouse zoom and pan roaming
  • expandAndCollapse: The interaction of subtree collapse and expansion, enabled by default.
  • initialTreeDepth: The initial expansion level of the tree map
  • leaves: special configuration of leaf nodes
    • label、itemStyle、emphasis、blur、select
  • data
    • collapsed: Whether the node is initialized to be collapsed
    • name、value、itemStyle、lineStyle、label、emphasis、blur、select、tooltip、animationXXX
  • id、name、zlevel、z、left、top、right、bottom、width、height、center、orient、symboXXX、itemStyle、label、labelLayout、lineStyle、emphasis、blur、select、selectedMode、tooltip

8. treemap

It is a common visualization form that expresses hierarchical data and tree-like data.

  • type:treemap
  • squareRatio: expected rectangular aspect ratio, numerical type
  • leafDepth: After setting, the drill-down function is enabled, numerical type
  • drillDownIcon: Prompt when the node can be drilled down. It can only be characters.
  • Roam: Whether to enable drag-and-drop roaming (moving and zooming)
  • nodeClick: the behavior after clicking the node, the possible values ​​are false (no response), zoomToNode (zoom to the node), link (hyperlink jump)
  • ZoomToNodeRatio: Clicking on a node will automatically zoom in on that node to the appropriate ratio, numerical value
  • visualDimension: Mapping other dimensions of data, never used before
  • visualMin: the minimum value of the current level, if not set, it will be automatically counted.
  • visualMax: Same as above
  • colorAlpha: The default color transparency selection range of this series, numerical value 0~1
  • colorSaturation: The default node color saturation selection range of this series, numerical value 0~1
  • colorMappingBy: At the same level node, when selecting in the color list, what to choose according to. Not used
  • visibleMin: If the area of ​​a rectangle of a node is less than this number, it will not be displayed, numerical type
  • childrenVisibleMin: If the area of ​​a node is less than this number, the child nodes of this node will not be displayed, numerical type
  • upperLabel: displays the parent node label of the rectangle, the same as label
  • breadcrumb: breadcrumbs, able to display the path of the current node
    • emptyItemWidth: Set a minimum width when the breadcrumb has no content
    • show、left、top、right、bottom、height 、itemStyle、emphasis
  • levels: multi-layer configuration
    • visualDimension、visualMin、visualMax、color、colorAlpha、colorSaturation、colorMappingBy、visibleMin、childrenVisibleMin、label、upperLabel、itemStyle、emphasis、blur、select
  • data
    • link: The hyperlink that can be jumped by clicking on this node
    • target: jump method
    • children: child nodes
    • value、id、name、visualXXX、colorXXX、visibleMin、childrenVisibleMin、label、upperLabel、itemStyle、emphasis、blur、select、tooltip
  • id、name、zlevel、z、left、top、right、bottom、width、height、label、itemStyle、emphasis、blur、select、selectedMode、labelLine、labelLayout、silent、animationXXX、tooltip

9. sunburst

The sunburst chart consists of a multi-layered donut chart. In terms of data structure, the inner circle is the parent node of the outer circle.

  • type:sunburst
  • data
    • children: child nodes
    • value、name、link、target、label、labelLine、itemStyle、emphasis、blur、select、tooltip
  • nodeClick: Behavior after clicking on the node, false (no response), rootToNode (after clicking on the node, the node will be the root node), link (hyperlink)
  • sort: Sort by value by default, parameters include desc, asc, null, callback function.
  • renderLabelForZeroData: If the data does not have a name, do you need to render the name?
  • id、name、zlevel、z、center、radius、clockwise、startAngle、label、labelLine、labelLayout、itemStyle、emphasis、blur、select、selectedMode、levels、tooltip、animationXXX

10. boxplot

Box plot and box plot are statistical charts used to display the dispersion of a set of data. Able to display the maximum value, minimum value, median, lower quartile, and upper quartile of a set of data

  • type:boxplot
  • hoverAnimation: Whether to turn on the animation effect of hover on the box
  • layout: layout method, optional horizontal, vertical
  • boxWidth: upper and lower limits of box width,[min, max]
  • data
    • name、value、groupId、itemStyle、emphasis、blur、select、tooltip
  • id、coordinateSystem、yAxisIndex、xAxisIndex、name、colorBy、legendHoverLink、itemStyle、emphasis、blur、select、selectedMode、dimensions、encode、dataGroupId、markXXX、zlevel、z、silent、animationXXX、universalTransaction、tooltip

11. candlestick

K-line chart

  • type:candlestick
  • large: Whether to enable large data volume optimization
  • largeThreshold: The threshold for turning on drawing optimization
  • data
    • name、value、groupId、itemStyle、emphasis、blur、select、tooltip
  • id、coordinateSystem、yAxisIndex、xAxisIndex、name、colorBy、legendHoverLink、hoverAnimation、layout、barWidth、barMinWidth、barMaxWidth、itemStyle、emphasis、blur、select、selectedMode、progressive、progressiveThreshold、progressiveChunkMode、dimensions、encode、dataGroupId、markXXX、clip、zlevel、z、silent、animationXXX、universalTransaction、tooltip

12. heatmap

Heat map mainly uses color to represent the size of numerical values, and must be used with the visualMap component.

  • type:heatmap
  • pointSize: The size of each point, valid in the geographical coordinate system
  • blurSize: The blur size of each point, valid in the geographical coordinate system
  • minOpacity: minimum transparency, valid on the geographical coordinate system
  • maxOpacity: Same as above
  • seriesLayoutBy: Specify whether to use rows or columns in the dataset to correspond to the series. Possible values ​​column, row
  • data
    • name、value、groupId、label、itemStyle、emphasis
  • id、name、coordinateSystem、yAxisIndex、xAxisIndex、geoIndex、calendarIndex、progressXXX、label、labelLayout、itemStyle、emphasis、universalTransaction、blur、select、selectedMode、encode、datasetIndex、dataGroupId、markXXX、zlevel、z、silent、tooltip

Thirteen, map

map

  • type:map
  • map: map name registered using registerMap
  • projection: Custom map projection
    • project: Project latitude and longitude coordinates to other coordinates
    • unproject: Calculate the latitude and longitude coordinates before projection based on the post-projection coordinates
    • stream: mainly used to adapt to the stream interface used in d3-geo
  • center: the center point of the current perspective
  • aspectScale: Aspect ratio used for scale map, invalid if projection is set
  • boundingCoords: a two-dimensional array that defines the longitude and latitude corresponding to the upper left corner and lower right corner of the position.
  • zoom: zoom ratio of the current perspective
  • scaleLimit: limit control of scroll wheel zoom
    • min: minimum scaling value
    • max: Same as above
  • nameMap: Custom region name mapping
  • nameProperty: The default is 'name'a custom property name for GeoJSON features, used as the primary key to associate data points and GeoJSON geographic features.
  • layoutCenter: defines the position of the map center on the screen
  • layoutSize: map size
  • geoIndex: specify a geo component
  • mapValueCalculation: Multiple series with the same map type will be displayed using the same map. If multiple series have values ​​in the same area, ECharts will count these values ​​to obtain one data. This configuration item is used to configure statistics. The optional parameters sum, average, min, max
  • showLegendSymbol: Display the color identification of the legend in the corresponding area of ​​the legend
  • data
    • name、value、groupId、selected、label、labelLine、itemStyle、emphasis、select、tooltip
  • id、name、colorBy、roam、selectedMode、label、labelLayout、labelLine、itemStyle、emphasis、select、zlevel、z、left、top、right、bottom、seriesLayoutBy、datasetIndex、dataGroupId、markXXX、silent、universalTransaction、tooltip

Fourteen, parallel

Series of parallel coordinate systems

  • type:parallel
  • inactiveOpacity: When selecting a box, the transparency of unselected lines
  • activeOpacity: When selecting a box, the transparency of the selected line
  • realtime: whether to refresh in real time
  • data
    • color: line color
    • width: line width
    • type: line type
    • dashOffset: dash offset
    • namevalue、lineStyle、cap、join、miterLimit、shadowXXX、opacity、emphasis
  • id、coordinateSystem、parallelIndex、name、colorBy、lineStyle、emphasis、smooth、progressive、progressiveThreshold、progressiveChunkMode、zlevel、z、silent、animationXXX

15. lines

Route map is used to draw line data with starting point and end point information. It is mainly used for route and route visualization.

  • type:lines
  • polyLine: whether it is a multi-line segment
  • effect: configuration of line effects
    • show: whether to display special effects
    • period: the time of special effects animation, unit is seconds
    • delay: delay of special effects animation
    • constantSpeed: Configure whether the movement animation of special effects graphics is at a fixed speed, unit px/s
    • symbol: special effect graphic mark
    • symbolSize: special effect graphic mark size
    • color: mark color
    • trailLength: the length of the special effects trail
    • loop: Whether to display in a loop
    • roundTrip: When the animation reaches the end point, whether to return to the original path
  • data
    • coords: an array containing two or more two-dimensional coordinates
    • name、groupId、lineStyle、label、emphasis、blur、select、tooltip
  • id、name、colorBy、coordinateSystem、xAxisIndex、yAxisIndex、geoIndex、large、largeThreshold、symbol、symbolSize、lineStyle、label、labelLayout、emphasis、blur、select、selectedMode、progressive、progressiveThreshold、dataGroupId、markXXX、clip、zlevel、z、silent、animationXXX、universalTransaction、tooltip

16. graph

Relationship diagram, used to display relationship data between nodes

  • type:graph
  • circular: configuration related to circular layout
    • rotateLabel: Whether to rotate the label, not rotated by default
  • force: Configuration items related to force guidance layout
    • initLayout: Initialization layout before force guidance layout. Initialization layout will affect the effect of force guidance.
    • repulsion: Repulsion factor between nodes.
    • Gravity: The gravitational factor that the node receives toward the center. The larger the value, the closer the node is to the center point.
    • edgeLength: distance between two nodes of an edge
    • layoutAnimation: whether to display the iterative animation of the layout
    • friction: This parameter slows down the movement of nodes. The value range is 0 to 1.
  • nodeScaleRatio: The response scaling ratio of the node when the mouse roams and zooms.
  • edgeSymbol: The mark type of both ends of the edge. It can be an array specifying both ends separately, or it can be a single unified specification.
  • edgeSymbolSize: The mark size at both ends of the edge. It can be an array specifying both ends separately, or it can be specified uniformly.
  • edgeLabel
    • show, position, formatter, similar to textStyle
  • categories: Categories for node classification
    • name、symbolXXX、itemStyle、label、emphasis、blur、select
  • autoCurveness: Automatically calculates the curvature of each edge when there are multiple edges between nodes. It is not enabled by default.
  • date
    • x: the initial x value of the node
    • y: Same as above
    • fixed: Whether the node is fixed in the force-guided layout.
    • Category: The index of the category where the data item is located.
    • name、value、symbolXXX、itemStyle、label、emphasis、blur、select、tooltip
  • nodes: alias, same as data
  • links: relationship data between nodes
    • source: A string containing the name of the source node of the edge. It also supports using numbers to represent the index of the source node.
    • target: A string containing the name of the target node of the edge. It also supports using numbers to represent the index of the source node.
    • value: The value of the edge, which can be used to map to the length of the edge in force-guided layout.
    • ignoreForceLayout: This side will not be calculated for force map layout.
    • lineStyle、lineStyle、label、emphasis、blur、select、symbol、symbolSize
  • edges: alias, same as links
  • id、name、legendHoverLink、coordinateSystem、xAxisIndex、yAxisIndex、polarIndex、geoIndex、calendarIndex、center、zoom、layout、roam、scaleLimit、draggable、symbolXXX、cursor、itemStyle、lineStyle、label、emphasis、blur、select、selectedMode、markXXX、zlevel、z、left、top、right、bottom、width、height、silent、animationXXX、tooltip

Seventeen, sankey

Sankey graph is a special flow graph (can be regarded as a directed acyclic graph). It is mainly used to express how raw materials, energy, etc. are processed or transformed from their initial form through intermediate processes to reach their final state.

  • type:sankey
  • nodeWidth: The width of each rectangular node in the Sankey diagram.
  • nodeGap: The gap between any two rectangular nodes in each column of the Sankey diagram.
  • nodeAlign: The alignment of nodes in the Sankey diagram. The default is double-end alignment (justify), which can be set to left alignment (left) or right alignment (right).
  • layoutIterations: The number of layout iterations. The purpose is to continuously iteratively optimize the positions of nodes and edges in the graph to reduce mutual covering between nodes and edges. The default value is 32. If you want the order of nodes in the graph to be in the order in the original data, set this value to 0.
  • levels: Settings for each layer of the Sankey diagram, which can be set layer by layer.
    • Depth: Specifies which layer of the Sankey diagram is set, and the value starts from 0.
    • label、edgeLabel、itemStyle、lineStyle、emphasis、blur、select
  • data
    • name: node name
    • value: node value
    • Depth: The layer where the node is located, the value starts from 0.
    • itemStyle、label、emphasis、blur、select、tooltip
  • node: same data
  • id、name、zlevel、z、left、top、right、bottom、width、height、orient、draggable、edgeLabel、label、labelLayout、itemStyle、lineStyle、emphasis、blur、select、selectedMode、links、edges、silent、animationXXX、tooltip

18. funnel

funnel chart

  • type:funnel
  • min: The specified minimum value of data.
  • max: The maximum value of the specified data.
  • minSize: The width of the minimum data min mapping.
  • maxSize: The width of the maximum data max mapping.
  • sort: data sorting, can be 'ascending', 'descending', 'none' (indicating data order), or a function
  • funnelAlign: horizontal alignment layout type, the default is center alignment, available options are: 'left' | 'right' | 'center'
  • gap: spacing between data graphics.
  • data
    • name、value、itemStyle、label、labelLine、emphasis、blur、select、tooltip
  • id、name、colorBy、orient、legendHoverLink、label、labelLine、itemStyle、labelLayout、emphasis、blur、select、selectedMode、zlevel、z、left、top、right、bottom、width、height、seriesLayoutBy、datasetIndex、dimensions、encode、dataGroupId、markPoint、markLine、markArea、silent、animationXXX、universalTransition、tooltip

Nineteen, gauge

dash board

  • type:gauge
  • title: Dashboard title.
    • Similar to textStyle
  • detail: Dashboard details, used to display data.
    • Similar to textStyle
  • data
    • title: Dashboard title
      • Similar to textStyle
    • detail: Dashboard details, used to display data.
      • Similar to textStyle
    • name、value、itemStyle
  • min: The smallest data value, mapped to minAngle.
  • max: The largest data value, mapped to maxAngle.
  • splitNumber: The number of split segments of the dashboard scale.
  • progress: Shows the current progress.
    • overlap: Whether the progress bars overlap when there are multiple sets of data.
    • width: progress bar width.
    • roundCap: Whether to display circles at both ends.
    • clip: Whether to crop the excess part.
    • show、itemStyle
  • splitLine: split line style.
    • length: the length of the dividing line. Supports relative radius percentages
    • distance: The distance between the dividing line and the axis.
    • show、lineStyle
  • axisTick: tick style.
    • splitNumber: The number of ticks divided between dividers.
    • length: tick mark length. Supports relative radius percentages.
    • distance: The distance between the tick mark and the axis.
    • show、lineStyle
  • pointer: Dashboard pointer.
    • showAbove: Whether the pointer is displayed above the title and dashboard details.
    • offsetCenter: The offset position relative to the center of the instrument panel. The first item in the array is the horizontal offset, and the second item is the vertical offset. It can be an absolute value or a percentage relative to the dashboard radius.
    • length: pointer length, which can be an absolute value or a half ratio relative to the radius.
    • width: pointer width.
    • keepAspect: Whether to maintain the aspect ratio of the graphic when scaling.
    • show、icon、itemStyle
  • anchor: fixed point of the pointer on the dial
    • show、showAbove、size、icon、offsetCenter、keepAspect、itemStyle
  • id、name、colorBy、zlevel、z、center、radius、legendHoverLink、startAngle、endAngle、clockwise、axisLine、axisLabel、itemStyle、emphasis、markXXX、silent、animationXXX、tooltip

20. pictorialBar

Pictogram bar chart, pictogram bar chart is a bar chart that can be set with various concrete graphic elements (such as pictures, SVG PathData, etc.). Often used in infographics. Used on a rectangular coordinate system with at least one category axis or time axis.

  • type:pictorialBar
  • Similar to bar

Twenty-two, themeRiver

Theme river is a special type of flow graph, which is mainly used to represent changes in events or topics over a period of time.

  • type:themeRiver
  • data:
    • date: Time attribute of time or topic.
    • value、name
  • id、name、colorBy、zlevel、z、left、top、right、bottom、width、height、coordinateSystem、boundaryGap、singlAxisIndex、label、labelLine、labelLayout、itemStyle、emphasis、blur、select、selectMode、tooltip

Twenty-three, custom

Custom series, a custom series can customize the rendering of graphic elements in the series. This can be extended to different charts.

  • type:custom
  • Properties are similar to the rest

Guess you like

Origin blog.csdn.net/realoser/article/details/131484233