Article Directory
(1) Title title
Document address
https://echarts.apache.org/zh/option.html#title
Common attribute
text: main title text, support \n to wrap.
subtext: subtitle text, support \n to wrap.
left: the distance from the left side of the container, which may be a specific value of the pixel value, for example
10; may be a percentage value with respect to the container, for example 10%; more often, may also be
used for left, center, right, it will be understood It is left-justified, centered, and right-justified
.
show: Whether to display the title component, the value is Boolean data, and the default is true.
(2) Tooltip
(1) Introduction
Official document: https://echarts.apache.org/zh/option.html#tooltip
In ECharts, the tooltip component is called tooltip, and its function is to provide users with relevant information at the right time. Some commonly used parameters are listed below, and the details are as follows.
trigger: trigger type, optional parameters are item (graphic trigger), axis (coordinate axis trigger), none (no trigger).
formatter: A formatter for the floating layer content of the prompt box, generally using a string template
axisPointer: the configuration item of the axis indicator, type is a sub-parameter of this parameter,
which is used to set the indicator type, and the value is optional line (line indicator),
shadow (shadow indicator), cross (crosshair indicator), none (no indicator).
(3) Toolbox toolbox
Official document:
https://echarts.apache.org/zh/option.html#toolbox
In ECharts, the toolbar component is called toolbox. By setting the toolbar, we can download the visualization to the local, or view the underlying data of the visualization.
show: Whether to display toolbar components, the value is Boolean data, and the default is
true.
feature: each tool configuration item, which contains many commonly used sub-parameters, such as
saveAsImage, restore, dataView, magicType, etc. Among them,
saveAsImage is to save the visualization results locally, restore is to restore the visualization
to the initial settings, dataView can see the underlying data view of the visualization
, and magicType can convert one visualization to another.
Function case
Dynamic type switching
toolbox.feature. magicType can realize dynamic type switching
feature: {
magicType: {
type: ['line', 'bar', 'stack', 'tiled']
}
}
Dynamic types enabled, including'line' (switch to line graph),'bar' (switch to bar graph),'stack' (switch to stack mode),'tiled' (switch to tiled mode)
(Four) legend legend
In ECharts, the legend component is called legend, and its function is to distinguish different data displays. The legend shows the marks, colors and names of different series.
Official document: https://echarts.apache.org/zh/option.html#legend
show: Whether to display the legend component, the value is Boolean data, and the default is true.
left: the distance from the left side of the container, which may be a specific value of the pixel value, for example
10; may be a percentage value with respect to the container, for example 10%; more often, may also be
used for left, center, right, it will be understood It is left-justified, centered, and right-justified
.
top: The distance from the top of the container, the value can be a specific pixel value, such as 10;
it can also be a percentage value relative to the container, such as 10%; it can also be the more commonly used
top, middle, and bottom, which can be understood as being in At the top, at the middle, at the
bottom.
orient: The layout orientation of the legend list, the default is horizontal (horizontal
), or it can be vertical (vertical).
data: The data array in the legend, usually one-to-one correspondence with the series of data display.
(5) Timeline timeline
Official document: https://echarts.apache.org/zh/option.html#timeline The
timeline component provides functions such as switching and playing among multiple ECharts options. In the method of use, timeline is slightly different from the components introduced before. There will be multiple options when used. The traditional options of ECharts can be called atomic options, and the options used when using timeline are called those that contain multiple atomic options. Compound option
(6) Data area zoom dataZoom
Official document: https://echarts.apache.org/zh/option.html#dataZoom
In ECharts, the data area zoom component is called dataZoom, and its function is to provide users with the area zoom function, so that users can zoom through the area Overview of the overall situation of the data, but also pay attention to the details of the data.
Currently ECharts supports the following types of area zoom components:
Slider type data area zoom component (dataZoomSlider)
Built-in data area zoom component (dataZoomInside)
Frame selection data area zoom component (dataZoomSelect)
(2) Slider-type data area zoom component
xAxisIndex: specifies the x-axis of the control
yAxisIndex: specifies the y-axis of the control
filterMode: filtering mode, the essence of dataZoom data window scaling is data filtering, that is, filtering out the content outside the window.
(3) Built-in data area zoom component The
so-called built-in means that the area zoom component is built-in in the coordinate system, and its parameters are basically the same as those of the slider-type data area zoom component mentioned above. The current zoom is zoomed in or out by sliding the mouse wheel.
(4) Frame selection data area zoom component
Frame selection is to zoom the data area through the selection box. This component is in the toolbox mentioned earlier
(7) Grid
(1) Introduction
Reference documents: https://echarts.apache.org/zh/option.html#grid
The grid size during visualization can be controlled in the visual coordinate system through the grid. In addition to the previously mentioned position parameters, such as left, top, right, bottom, etc., the commonly used parameters include width (the width of the grid component), height ( The height of the component), the default parameters of both are auto, which is adaptive, of course, you can also specify a specific value
(8) Coordinate axis
(1) Introduction
Generally speaking, our most commonly used coordinate axis is the rectangular coordinate system, especially the two-dimensional rectangular coordinate system, so the horizontal axis (xAxis) and the vertical axis (yAxis) are most often used.
(9) Data series
A chart may contain multiple series, and each series may contain multiple data, so a data series (series) is mainly used as a container for data. For each visualization chart, the format of the series is not exactly the same. Let's look at the series structure of a pie chart. series is an array structure, using square brackets, each part within the square brackets is enclosed by braces, each brace is similar to a dictionary structure, containing keys (key) and values (value). For example, the name in the code is the key, and the "access source" is the value; type specifies the picture as a pie (pie chart); radius specifies the radius of the pie chart, and the size is represented by the proportion of the picture in the frame; data contains The data content of each pie in the pie chart
Each series determines its own chart type through type
(10) Global font style textStyle
When making visualization, text display is often used. At this time, choosing a suitable font style and visualization is particularly important. In the global font style (textStyle), we can define the global font style display, the commonly used parameters and their descriptions are as follows.
color: The color of the text, for example textStyle.color = "#fff".
fontStyle: The style of the text font. The optional values are normal, italic, and
oblique.
fontWeight: The thickness of the text font. The optional values are normal, bold,
bolder, lighter, 100, 200, etc.
fontFamily: The font family of the text. The optional values are sans-serif, serif,
monospace, Arial, Courier New, Microsoft YaHei, etc.
fontSize: The font size of the text, the value is a numeric value, such as 12.
