Echarts Icon Learning

1: Step

To introduce echarts, you need the following 4 steps:
Prepare a DOM with size (wide height) for echarts
Introducing the Echarts Master file via the script tag
Configure the Echarts path for the module loader, linking to the directory where Echarts.js is located from the current page
Dynamically load the echarts and the desired chart and start using it in the callback function (ensure that the same page has been loaded echarts, and then directly require (' echarts ') when used. Init (DOM) on the line

2: Example

3: Effect

Four: summary

Noun analysis

Basic noun

noun	Description
Chart	Refers to a complete chart, such as a line chart, a "basic" chart type such as a pie chart, or a "mash up" chart composed of basic charts, which may include axes, legends, etc.
Axis	An axis in a Cartesian coordinate system that can be classified as a class, numeric, or temporal type.
Xaxis	The horizontal axis in a Cartesian coordinate system, usually with the default type
YAxis	A vertical axis in a Cartesian coordinate system, usually with a numeric type of default
Grid	A drawing grid in a Cartesian coordinate system other than an axis
Legend	Legends, expressing data and graphics associations
DataRange	Range selection, often used to display geographic data when selecting a domain
Datazoom	Data region scaling, often used to display large data when selecting a visual range
Roamcontroller	Zoom in and out of a roaming component with a map
Toolbox	Auxiliary tool box, auxiliary function, such as add marking, box selection, zoom, etc.
ToolTip	Bubble balloon, often used to show more detailed data
Timeline	Time axis, often used to show multiple data on the time dimension of the same set of data
Series	Data series, a chart may contain multiple series, each of which may contain multiple data

Chart noun

noun	Description
Line	Line chart, stacked line chart, area chart, stacked area chart.
Bar	Column chart (portrait), stacked column chart, bar chart (landscape), stacked bar chart.
Scatter	Scatter plot, bubble chart. Scatter plots need to be at least two data horizontally, higher dimension data can be mapped to color or size when added, and bubble chart when mapped to size
K	Candlestick chart, candlestick chart. Often used to display stock trading data.
Pie	Pie chart, doughnut chart. The pie chart supports two (RADIUS, area) nightingale rose patterns.
Radar	Radar chart, filled with radars. A common chart for high-dimensional data presentation.
Chord	Chord graph. Often used to show relational data, the outer layer is a doughnut chart, can reflect the data ratio relationship, the inner layers for each sector connected to each other chord, can reflect the relationship data
Force	Force Guide layout diagram. Often used to show complex relationships network clustering layout.
Map	Map. Built-in world map, China and China 34 provinces and municipalities map data, the map type can be extended by standard Geojson. Support SVG extended class map application, such as indoor map, sports ground, object construction, etc.
Evnetriver	Event Stream diagram. Often used to show multiple events with time attributes, and the evolution of events over time.

Chart type

The Chart Library standard contains a standard chart of the single chart type and a mixed-mix chart with multiple chart types:

Echarts Icon Learning