You can refer to another address: https://www.cnblogs.com/zhukaixin/p/11322525.html
mytextStyle={ color:"#333", //text color fontStyle:"normal", //italic italic oblique oblique fontWeight:"normal", //text weight bold bolder lighter 100 | 200 | 300 | 400... fontFamily :"sans-serif", //font family fontSize:18, //font size }; mylineStyle={ color:"#333", //color,'rgb(128, 128, 128)','rgba(128 , 128, 128, 0.5)', support linear gradient, radial gradient, texture fill shadowColor:"red", //shadow color shadowOffsetX:0, //the offset distance of the shadow in the horizontal direction. shadowOffsetY:0, //The offset distance of the shadow in the vertical direction shadowBlur:10, //The blur size of the graphic shadow. type:"solid", //coordinate axis line type, solid, dashed, dotted width:1, //coordinate axis line width opacity:1, //Graphic transparency. Supports numbers from 0 to 1, and the graph is not drawn when it is 0 };
myareaStyle={ color:['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)'],//Separate area color. The separated area will set the colors sequentially in the order of the colors in the array. The default is a dark and light interval color. shadowColor:"red", //shadow color shadowOffsetX:0, //the offset distance of the shadow in the horizontal direction. shadowOffsetY:0, //The offset distance of the shadow in the vertical direction shadowBlur:10, //The blur size of the graphic shadow. opacity:1, //Graphic transparency. Supports numbers from 0 to 1, and the graph is not drawn when it is 0 }; grid=[{ show:true, //Whether to display zlevel:0, //Canvas layering of the graph to which it belongs, Canvas with a larger zlevel will be placed in zlevel The upper side of the small Canvas z: 2, //The z layer of the component to which it belongs, the graphics with a small z value will be covered by the graphics with a large z value left: "10%", //The distance between the component and the left side of the container, the percentage character String or integer number top: 60, //The distance between the component and the upper side of the container, percentage string or integer number right: "auto", //The distance between the component and the right side of the container, percentage string or integer number bottom :"auto",
width:"auto", //Legend width
height:"auto", //Legend height
containLabel: true, //Whether the grid area contains the scale label of the axis,
backgroundColor:"transparent", //The title background color
borderColor:" #ccc", //Border color
borderWidth:0, //Border line width
shadowColor:"red", //Shadow color
shadowOffsetX:0, //Offset distance in the horizontal direction of the shadow
shadowOffsetY:0, //Vertical direction of the shadow The offset distance on the
shadowBlur: 10, //The blur size of the shadow
tooltip:{ //Coordinate system specific tooltip setting
show:true, //Whether to display the prompt box component, including the prompt box floating layer and axisPointer
trigger:"axis ", //The trigger type none does not trigger the'item' data item graphic trigger, which is mainly used in charts without category axis such as scatter charts and pie charts. The'axis' coordinate axis trigger is mainly used in graphs that use category axes, such as histograms and line graphs.
position: ['50%', '50%'], //The position of the floating layer of the prompt box. When the default setting is not set, the position will follow the position of the mouse, [10, 10], return the function, inside the graphic where the mouse is located Center position, top, left, bottom, right mouse on the top side, left side, bottom side, right side of the graph,
formatter: "{b0}: {c0}<br />{b1}: {c1}", // The prompt box floating layer content formatter supports two forms of string template and callback function. The template variables are {a}, {b}, {c}, {d}, {e}, which represent the series name, data name, Data value etc.
backgroundColor:"transparent", //title background color
borderColor:"#ccc", //border color
borderWidth:0, //border line width
padding:5, //Legend margin, unit px 5 [5 , 10] [5,10,5,10]
textStyle:mytextStyle, //text style
},
}];
xAxis=[{ show:true, //Whether to display the x-axis gridIndex:0, //the grid where the x-axis is located The index of the first grid position: "bottom", //x-axis position by default . "top", "bottom"
offset:0, //The offset of the X axis relative to the default position. It is useful when there are multiple X axes at the same position.
type:"category", //Axis type. 'value' Value axis, suitable for continuous data. The'category' category axis is suitable for discrete category data. For this type, the category data must be set through data.
// The'time' time axis is suitable for continuous time series data. Compared with the value axis, the time axis is formatted with time. The scale calculation is also different. For example, the month and week are determined according to the range of the span. The day is also the scale of the hour range. 'log' Logarithmic axis. Applicable to logarithmic data
name:'time', //axis name
nameLocation:"end", //axis name display location. Optional:'start','middle','end'
nameTextStyle:mytextStyle, //The text style of the axis name
nameGap:15, //The distance between the axis name and the axis
nameRotate:0, //The name of the axis Rotation, angle value
inverse:false, //whether it is the inverse coordinate axis
boundaryGap:true, //The boundaryGap in the category axis can be configured as true and false. Non-category axis, including time, value, logarithmic axis, boundaryGap is an array of two values, which respectively represent the extended range of the minimum and maximum values of the data. You can directly set the value or relative percentage, and it is invalid after setting min and max. ['20%', '20%']
min:null, //The minimum value of the axis scale. It can be set to a special value'dataMin', at this time the minimum value of the data on the axis is taken as the minimum scale. If it is not set, the minimum value will be automatically calculated to ensure the uniform distribution of the coordinate axis scale. In the category axis, it can also be set to the ordinal number
max:null, //maximum value of the axis scale. It can be set to a special value'dataMax', at this time the maximum value of the data on the axis is taken as the maximum scale. If it is not set, the maximum value will be automatically calculated to ensure the uniform distribution of the coordinate axis scale. In the category axis, it can also be set to the ordinal
scale: false, //Only valid in the value axis (type:'value'). Whether it is out of 0 value ratio. When set to true, the coordinate scale will not be forced to include a zero scale. It is useful in scatter plots with dual value axes. This configuration item is invalid after setting min and max.
splitNumber: 5, //The number of divisions of the axis. It should be noted that this number of divisions is only an estimated value. On this basis, the number of segments actually displayed will be adjusted according to the legibility of the axis scale display after division.
minInterval: 0, //The minimum interval of the automatically calculated axis, for example, it can be set to 1 to ensure that the axis division scale is displayed as an integer. Only valid in the value axis (type:'value').
logBase:10, //The base of the logarithmic axis, only valid in the logarithmic axis (type:'log')
silent:false, //Whether the axis is static and cannot be interactive
triggerEvent:false, //Whether the axis label is responsive and Trigger mouse event
axisLine: {//coordinate axis
show:true, //Whether to display the axis of the coordinate axis
onZero:true, //Whether the axis of the X axis or the Y axis is on the 0 scale of another axis, it is only valid when the other axis is a value axis and contains 0 scale
lineStyle: mylineStyle
},
axisTick :{ //coordinate axis scale related settings
show:true, //whether to display the axis scale.
alignWithLabel:false, //On the category axis, it is valid when boundaryGap is true, which can ensure that the tick mark and label are aligned.
interval:auto, //The display interval of the axis scale is valid in the category axis. By default, labels are displayed at a strategy interval where the labels do not overlap. It can be set to 0 to force all labels to be displayed. If set to 1, it means "display one label every other label", if the value is 2, it means display one label every two labels, and so on
inside: false, //Whether the axis scale is facing inward, the default is facing outward.
length:5, //The length of the axis scale.
lineStyle:mylineStyle
},
axisLabel:{ //Related settings of axis scale label
show:true, //Whether to display
interval:"auto", //The display interval of the axis scale label, valid in the category axis. By default, labels are displayed at a strategy interval where the labels do not overlap. It can be set to 0 to force all labels to be displayed. If set to 1, it means "display one label every other label", if the value is 2, it means display one label every two labels, and so on
inside: false, //Whether the scale label is facing inward, the default is
rotate:0 , //The angle of rotation of the scale label. When the category label of the category axis cannot be displayed, it can be rotated to prevent the label from overlapping. The angle of rotation is from -90 degrees to 90 degrees
margin:8, //The distance between the scale label and the axis
formatter: function (value, index) {//Use the function template, the function parameters are the scale value (category), The index of the scale
return value+"kg";
},
showMinLabel:null, //Whether to display the label with the smallest tick. Possible values are true, false, null. It is automatically determined by default (that is, if the labels overlap, the label with the smallest tick will not be displayed)
showMaxLabel:null, //Whether to display the label with the largest tick. Possible values are true, false, null. The default is automatically determined (that is, if the labels overlap, the label with the largest tick will not be displayed)
textStyle:mytextStyle
},
splitLine:{ //The dividing line of the coordinate axis in the grid area.
show:true, //Whether to display the dividing line. The value axis is displayed by default, and the category axis is not displayed.
interval:"auto", //The display interval of the axis dividing line, which is valid in the category axis. By default, labels are displayed at a strategy interval where the labels do not overlap. It can be set to 0 to force all labels to be displayed. If it is set to 1, it means "display one label every other label". The data of the interval can be represented by a numeric value, or it can be controlled by a callback function. The format of the callback function is as follows:
lineStyle:mylineStyle
},
splitArea:{ //The separated area of the axis in the grid area, which is not displayed by default.
interval:"auto",
show:false, //Whether to display the separated area
areaStyle:myareaStyle
},
data: ['Mon','Tuesday','Wednesday','Thursday','Friday','Saturday' ,'Sunday'], //Category data, valid in the category axis (type:'category').
zlevel:0, //The zlevel value of all graphs on the X axis.
z:0, //The z value of all graphics of the X axis component
}
];
yAxis=xAxis;