For official ECharts documents, don’t expect to be able to read the entire document and understand everything in one day. Instead, think of the document as a reference manual and know how to quickly query it when you’re charting with ECharts. For a document as large as ECharts, memorizing the contents of all configuration items is unnecessary and unlikely, so just memorize English words for a few common configuration items, such as title, Legend, Toolbox, Tooltip, etc. On the ECharts 4.x website, the most important documents are examples, tutorials, apis, and configuration item manuals.
The steps for querying the API submenu in the ECharts 4.x Documents menu are as follows. (1) On the ECharts 4.x website, the document menu is the one developers use the most. Click the “Document” menu, and 7 sub-menus pop up, among which the most important are “Tutorial”, “API” and “Configuration Item Manual”, as shown in the picture.
(2) After clicking the sub-menu “API” of the “Document” menu, the “API” interface is divided into the navigation area on the left and the main display area of information on the right. Click the link in the navigation area on the left, and the detailed content of the link will be displayed in the main information display area on the right, as shown in the figure.
To query the Configuration Item Manual submenu in the ECharts 4.x Documentation menu, perform the following steps. (1) Click “Configuration Item Manual” in the “Document” menu; Alternatively, after the Documents page is displayed, you can click the Configuration Item link in the upper left corner to enter the Configuration Item sub-page. The Configuration Item sub-interface is also divided into the navigation area on the left and the main information display area on the right. Click the link in the navigation area on the left, and the corresponding content of the link will be displayed in the main information display area on the right, as shown in the figure.
(2) If you are not familiar with configuration items (Options), Enter the configuration items to be queried in the text box at the upper left corner of the Configuration Items Manual interface (fuzzy query is supported). After you press Enter, ECharts will return the query result and highlight the queried result. As shown in the figure, Enter the content you want to query “title.textstyle.font” in the text box and press Enter. The query result will be displayed at the bottom of the text box. Four results are found (as shown in the first frame on the right), and the results are highlighted in the main information display area below (as shown in the second and third frames on the right).
(3) If you are familiar with configuration items, click the icon in the navigation pane to expand or contract the configuration items in the left navigation area. When you click a configuration item, its details are displayed in the information display area, as shown in the figure. When the mouse click on the “manual of configuration items” on the left side of the interface in the second box “title. TextStyle. FontStyle”, in the upper right-hand corner of the box will appear in the corresponding explanation and illustration.
When using ECharts for chart development, you also need to understand the ECharts infrastructure and common terminology.
- ECharts infrastructure
If you use DIV or CSS to draw in a browser, you can only draw simple boxes or simple circles. When it comes to drawing more complex visualizations, there are two technical solutions: Canvas and SVG. Canvas is a drawing technology based on pixels. You can draw arbitrarily on Canvas through various drawing functions. SVG is completely different from Canvas. SVG is a drawing technology based on object model. It combines several labels into a chart, which is characterized by high fidelity and no zigzag distortion even when enlarged. Drawing with Canvas and SVG has its own advantages.
ECharts is based on Canvas technology for graphing. To be precise, the underlying ECharts relies on the lightweight Canvas library ZRender. ZRender, developed by Baidu team, calls some Canvas interfaces when drawing through Canvas. Typically, when developing diagrams using ECharts, the ZRender class library is not directly involved. The underlying base libraries in the ECharts infrastructure, as shown.
There are three modules on top of the base library in the ECharts infrastructure: components, diagram classes, and interfaces. Component modules include Axis, Grid, polar, title, tooltip, Legend, dataZoom, dataRange, Toolbox, and timeline Imeline). ECharts has nearly 30 types of graph modules, including Bar, Line, Scatter, K, PIE, Radar, Map, Gauge, and funnel. Diagram classes and components together form a chart. If you just make a chart, you only need to master diagram classes and components to complete about 80% of the functions. Another 20 percent or so involves more advanced features. For example, clicking on an area of a chart can jump to another chart. Or when you click on an area of the chart, the data in another area is displayed, which is the linkage effect of the chart components. At this point, you need to use the ECharts interface, event programming.
- A common term for ECharts
Some of the basic nouns of ECharts are used almost everywhere in this book, so the reader should first get a basic impression of these basic nouns. Because ECharts chart development is mainly in English, you need to know the English words of these basic nouns and their corresponding meanings.
A brief description of some of the basic nouns of ECharts is shown in the table
In the development of ECharts chart, the core work is to set the properties of the configuration item (option); One of the most important attributes in the configuration item is the type in the series that represents the chart type. Therefore, you need to have a general understanding of the common chart types in ECharts, especially the English expressions for memorized ICONS, such as Line, Bar, Pie, Scatter, radar, etc.
A brief introduction to ECharts chart nouns is shown in the table.
