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

Configuration items are based on key-value pairs in the form of , and there are a lot of configuration items , ECharts of learning for most of these configuration items , for

CI study , we can not rote , when you need to check out the official documentation . URL :

Echarts official website:

https://echarts.apache.org/zh/option.html ,

Commonly used configuration items are used several times , and you will naturally write them down

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

Use ECharts drawn diagrams , are inherently comes with some features , these features are all available in each chart , we can configure these functions are set .