The most basic configuration explanation
- xAxis: The x- axis in the Cartesian coordinate system . If the value of the type attribute is category , then data data needs to be configured , which represents the presentation on the x- axis
- yAxis: The y- axis in the Cartesian coordinate system . If the type attribute is configured as value , there is no need to configure data . At this time, the y-axis will automatically go to the series to find data to draw the chart
- series: Series list. Each series determines its own chart type by type , and data sets the data of each series
1. Drawing of histogram
1.1. Implementation steps of histogram
- Step 1 The most basic code structure of ECharts
- Step 2 prepare x- axis data
- Step 3 prepare y- axis data
- Step 4 Prepare option and set the value of type in series to : bar
Note : the axis xAxis or yAxis configuration , type values are mainly two : category and value , if the value of the type attribute category , then the need to configure the data data , representative of x rendering axis . If the type attribute configured value , Then there is no need to configure data , at this time the y- axis will automatically go to the series to find data to draw the chart
The effect is as follows:
1.2 Common effects of histogram
mark
Maximum/minimum markPoint
Average: markLine
display
Numerical display
Horizontal histogram
The so-called horizontal bar chart , just let x roles and axis y the roles were reversed axis of what can be . Both xAxis of the type set value, YAXIS the type is set to category , and set the data to
1.3 General arrangement
-
Title : title
-
Tooltip : tooltip
tooltip means that when the mouse moved to a chart or click the chart , demonstrating the prompt box
-
Tool button: toolbox
-
Legend : legend
legend is a legend, used to filter categories, and need to be used in conjunction with series
The data in legend is an array
The value of data in legend needs to be consistent with the name value of a group of data in the series array