Introduction to grid:
One of the components used to define the chart drawing area. It is used to determine the position, size and scale of each graphic in the coordinate system area of the Echarts container, so that multiple grids can be defined in each chart. Each grid The grid is used for an independent coordinate system, and the position and size of the grid are controlled through attributes such as x, y, width, height, etc., and the problem of displaying charts and multiple graphics in different positions is realized evenly or according to the requirements of one’s own development.
Note:
①When defining the canvas color backgroundColor, show:true must be set in grid to take effect.
1. Configuration of the option attribute of the legend
// grid grid
option={
// A single series of charts can be written directly as grid:{}, and multiple series can be written as grid:[{},{},{}]
grid:[
{
id:'1', //Component ID
show:true, //Whether to display the coordinate system grid
zlevel:1, //Level size of all graphics
z:2, //Z value of all graphics in this component
left:'10%', //The distance between the grid and the left side of the container
right:'10%', //The distance between the grid and the right side of the container
top:'10%', //The distance between the grid and the top of the container
botto:'10%', //The distance between the grid and the bottom of the container
width:'auto', //Grid width
height:'auto', //Grid height
containLabel:true, //Whether the grid area accommodates the scale labels of the coordinate axes and positions them together to prevent label overflow
backgroundColor: "rgba(156, 29, 29, 1)", //The background color of the grid
borderWidth:2, //Grid border line width
borderColor:"rgba(156, 29, 29, 1)", //Grid border color
shadowColor:"rgba(156, 29, 29, 1)", //The shadow color of the grid
shadowBlur: 7, //The shadow degree of the grid
shadowOffsetX:10, //The offset of the shadow in the horizontal direction
shadowOffsetY:10, //The offset of the shadow in the vertical direction
// tooltip specific to this coordinate system
tooltip:{
show:true, // Whether to display the prompt component
trigger:'item', // Trigger type
//Coordinate indicator configuration items
axisPointer:{
type:"line", //Indicator type
axis:'auto', //The coordinate axis of the indicator
snap:true, //Whether the indicator automatically snaps to the point
z:1, //Z value of indicator
animation:true, //Whether to turn on animation
animationThreshold:2000, //The threshold of animation. When the number of graphics displayed in a single series is greater than this threshold, the animation will be turned off.
animationDuration:1000, //The duration of the initial animation
animationEasing:'cubicOut', //Easing effect of initial animation
animationDelay:2000, //Delay of initial animation
animationDurationUpdate:1000, //The duration of the data update animation
animationEasingUpdate:200, //Easing effect of data update animation
animationDelayUpdate:200, //Delay of data update animation
//Indicator text label style (text container style)
label:{
show:true, // Whether to display text labels
//The following content needs to be set to true in show to take effect
precision:'auto', //Display decimal point of text value
formatter:"display text", //Text label display settings, writable method
margin:3, //label distance from axis
color: "rgba(234, 21, 21, 1)",
//text color
fontStyle:'normal', //Font style
fontWeight:'normal', //Font weight
fontFamily:'sans-serif', //Text font
fontSize:15, //font size
lineHeigh:10, //line height
width:10, //Text display width
height:10, //Text display height
textBorderColor:'red', //text stroke color
textBorderWidth:10, //Text stroke width
textBorderType:'solid', //stroke type
textBorderDashOffset:10, //The offset when the stroke is a dotted line
textShadowColor:'transparent', //text shadow color
textShadowBlur:10, //text shadow length
textShadowOffsetX:10, //Text shadow horizontal offset
textShadowOffsetY:10, //vertical offset of text shadow
overflow:'none', //Whether the text is truncated if it exceeds the limit
ellipsis:'···', //Display content at the end when text is truncated
padding:[5,5,5,5], //text label inner margin
backgroundColor:'auto', //Background color of text label
borderColor:'red', //border color of text label
borderWidth:20, //border width of text label
shadowBlur:20, //Text label shadow size
shadowColor:'red', //Shadow color
shadowOffsetX:20, //The horizontal offset of the shadow of the text label
shadowOffsetY:20, //The vertical offset of the shadow of the text label
}
// Indicator vertical mark line style
lineStyle:{
color:'red', //The color of the line.
width:10, //Line width
type:10, //Type of line
dashOffset:10, //Offset of dashed line
cap:'butt', //The shape of the end of the line segment
join:'bevel', //The shape of the connected parts of the line segments
miterLimit:10, // join sets the miter limit ratio for miter
shadowBlur:10, //The shadow size of the line
shadowColor:'red', //The shadow color of the line
shadowOffsetX:20, //Shadow horizontal offset
shadowOffsetY:20, //Shadow vertical offset
opacity:0.5, //Transparency of the line
}
// indicator horizontal marker line style
crossStyle:{
// Configuration is the same as above
}
// When the indicator type type ='shadow' takes effect, the shadow indicator
shadowStyle:{
color: "rgba(194, 91, 91, 1)", //Fill color
shadowBlur:10, //The shadow blur degree of the graphic
shadowColor:10, //shadow color
shadowOffsetX:10, //Horizontal offset distance of shadow
shadowOffsetY:10, //Shadow horizontal offset distance
opacity:0.5, //Graphic transparency
}
},
// Tips: The style of the suspended layer only takes effect when the trigger is set to item. The style set to axis is triggered by the coordinate axis.
position:['50%','50%'], //The position of the floating layer of the prompt box
formatter:'Text content conversion', //Prompt box floating layer content formatter, writable method
valueFormatter:(value) => '$' + value.toFixed(2), //Format callback function for the numerical display part in tooltip.
borderColor:'red', //The border color of the floating layer of the prompt box
borderWidth:5, //The border width of the floating layer of the prompt box
padding:10, // inner margin of prompt box floating layer
//Text style in floating layer
textStyle: {
// The text styles are the same, the only difference is where they are written. I will list them here.
color: 'red', // color
fontStyle: 'normal', // font style
fontWeight: 500, //or 'noraml', // font weight
fontSize: 16, // font size
lineHeight: 20, // line height
textBorderWidth: 20, // Text stroke width
textBorderColor: 'red', //stroke color
textBorderType: 'solid', //stroke type
textBorderDashOffset: 20, // dash offset
textShadowBlur: 20, // text shadow length
textShadowOffsetX: 20, //The shadow is equivalent to the X-axis offset
textShadowOffsetY: 20, //The shadow is equivalent to the Y-axis offset
overflow: 'truncate', //How to deal with text exceeding the width break and newline
ellipsis: '...' // When combined with overflow truncation, display...
}
}
}
]
}
2. Anatomy diagram
3. Data series binding grid, basic use
A simpler understanding of the grid is to define two small canvas areas separately in the Echarts container canvas to implement drawing.
The basic usage of binding the canvas area is as follows:
option=[
grid:[
{
··· //Grid one configuration
},
{
··· //Grid 2 configuration
}
]
//Define the coordinate axis in which grid
xAxis:[
{ //Series 1
gridIndex:0, //defined in grid one
type:'category',
···
},
{//Series 2
gridIndex:1, //defined in grid two
type:'category',
···
}
],
yAxis: [
{
gridIndex:0, //defined in grid one
type: 'value'
},
{
gridIndex:1, //defined in grid two
type:'value'
}
],
series:[
{
//Defined in grid one, the first grid does not need to be written
//xAxisIndex:0,
//yAxisIndex:0,
name:'Email' ,
type:'line',
···
},
{
//Defined in grid two
xAxisIndex:1,
yAxisIndex:1,
name:'Email' ,
type:'line',
···
}
]
]