CSDN open-source summer camp Baidu data visualization practices ECharts (4), csdnecharts

CSDN open-source summer camp Baidu data visualization practices ECharts (4), csdnecharts
ECharts knowledge point summary:

During the application process, you will always encounter some difficult concepts and attributes. Here we will summarize some difficult knowledge points to facilitate understanding of the concept and better grasp ECharts.

(1) 1. What does a complete option contain? What types can be summarized?

There are three types of colors: Public options, component options, and data options.

Name	Description
{Color} backgroundColor	The Default background of the full graph. (For details, refer to backgroundColor. The default value is none. It is transparent.
{Array} color	The color list of the value series (see color for details). It can be configured with arrays, for example, ['# 87cefa', 'rgba (123,123,123, 0.5 )','... '], when the number of series is greater than the length of the color list, it will be selected cyclically
{Boolean} renderAsImage	Non-IE8-supports rendering as an image (for details, see renderAsImage)
{Boolean} calculable	Whether to enable the drag and drop recalculation feature. It is disabled by default. (For details, see calculable. calculableColor, calculableHolderColor, nameConnector, and valueConnector)
{Boolean} animation	Whether to enable the animation. The animation is enabled by default. For details, see "animation". addDataAnimation, animationThreshold, animationDuration, and animationEasing)
{Object} timeline	Timeline (For details, refer to timeline). Each chart has only one timeline control at most.
{Object} title	Title (For details, refer to title). Each chart has only one title control.
{Object} toolbox	Toolbox (see toolbox for details). Each chart can have only one toolbox at most.
{Object} tooltip	Prompt box (For details, refer to tooltip). Information prompt when the mouse is suspended for Interaction
{Object} legend	Legend (see legend for details). Each chart can have only one legend at most.
{Object} dataRange	Value range selection (see dataRange for details)
{Object} dataZoom	Data Area Scaling (see dataZoom for details) and data display range Selection
{Object} grid	Drawing grid in Cartesian coordinate system (see grid for details)
{Array | Object} xAxis	The horizontal axis array in the Cartesian coordinate system (see xAxis for details). Each item in the array represents a horizontal axis. The standard (1.0) specifies that a maximum of two horizontal axes exist at the same time.
{Array | Object} yAxis	The vertical axis array in the Cartesian coordinate system (see yAxis for details). Each item in the array represents an vertical axis. The standard (1.0) specifies that a maximum of two vertical axes exist at the same time.
{Array} series	The data content generated by the driver chart (see series for details). Each item in the array represents a series of special options and data.

All data options are not required. If public options are not passed in, standard attributes in conifg are used by default. Unlike the component options, this component is not used if the component options are not passed in. Each configuration item in the input component options will also be merger in config.
Ec supports topics. The so-called topic is another config with a higher priority. Therefore, the final option = coinfg + theme + passed-in option has a higher priority, so the final option = coinfg + theme + passed-in option.
For example, the option corresponds to the image content one by one:

(2) The Formatter is a gold oil, which can achieve a high degree of personalized needs, where the formatter is supported? Is there an Application Scenario in every place you find?

Formatter is used for Text Formatting. Because it is impossible to have built-in text display to meet all requirements, formatter is particularly important and flexible in customization, not only to meet the format requirements, but also to meet graphical requirements.
The most common tools are tooltip, axisLabel, and itemStyle. *. label. formatter.
1) Let's Talk About the formatter of tooltip. This is special because tooltip is a dom display.
Formatter should return html fragments, which can be quite flexible because they are html fragments. You can even return a table, an image, or even embed an iframe to reference another page. At the same time, if formatter supports functions and functions, you can basically do whatever you want, not only for image processing, but you can also use this callback to do additional business logic, for example, computing, uploading data, calling your own method to obtain additional display content (ajax), etc.

For example:

The sales volume of iPhone 3 and iPhone 4 in Xinjiang is only 461 of the total value when the tooltip is called back. What should I do if I need to display the total number of iPhone 3 and iPhone 4 respectively? Currently, callback variables of the current version are not supported. How can we meet this requirement?

Never forget that the data is in your own hands. option is an ec. If callback variables or data in any place cannot meet your needs, you can directly find the data from your own option.

There can be a lot of tips, such as the function closure to circle the option, or from the myChart (Chart instance). getOption () method.

2) The common formatter is axisLabel. For example, the image Plus Unit
For example:

Formatter is used as the time format. AxisLabel can be used with other attributes of the same level to provide many highly personalized functions.

(3) What is Symbol? Where do I use symbol?

> Logo image type (for recycling)
SymbolList: 'circle' | 'rectangle '| 'trigger' | 'Diamond' | 'emptycircle' |
'Emptyrectang' | 'emptyangle '| 'emptydiamond'
> Most of them are used for series Data Representation + line segment nodes:
Data marking endpoint
Data punctuation
Line chart, scatter chart
Current timeline point
Both ends of a force-Directed Graph
The document also contains
In addition, five special logo images are supported: 'heart (heart-shaped) ', 'droplet (water drop)', 'pin (annotation) ', and 'arrow (arrow) ', 'star (pentagram)', and star can change the desired n-star. For example, 'start6' is a hexagonal star, where n must be greater than or equal to 3. In addition, custom images are supported from 1.3.5 in the format of 'image: // '+ 'image path '.
The symbol in mp has good effects in some places, such as weather forecast. The effect of placing weather images on a map.

If it works well, you can make beautiful things.
For example, reminder: Up and down dual axes, axis, grid, axis label text personalization, line feed, symbol:

Implementation Code:

<! DOCTYPE html> 



This summary is here first and will continue next time.




































How can I participate in ACM Programming Competition and CSDN open-source summer camp?
Three college students ?? As far as I know, it seems that two books have scored more than 400 points and nearly 500 points. If you have these three books, don't go to any competition. Just get a job with a diploma!