mytextStyle={
Color: "double", / / text color
fontStyle: "normal", / / italic s oblique
fontWeight: "normal", / / text thickness bold bolder lighter 100 | 200 | 300 | 400
fontFamily: "sans serif", / / font family
fontSize:18, / / font size
};
mylineStyle={
Color: "X", / / color, "rgb(128, 128, 128)", "rgba(128, 128, 128, 0.5)", support linear gradient, radial gradient, texture filling
shadowColor: "red", / / shadow color
shadowOffsetX:0, / / the offset distance in the shadow horizontal direction.
Shadowoffset: 0, / / the offset distance in the shadow vertical direction
shadowBlur:10, / / the blur size of the shape shadow.
Type: "solid", / / type of axis line, solid, dashed, dotted
width:1, / / axis line width
opacity:1, / / graph transparency. Numbers from 0 to 1 are supported. When it is 0, the graph will not be drawn
};
myareaStyle={
Color: ['rgba (250250250,0.3) ','rgba (200200200,0.3)'], / / color of the separated area. The delimited area loops through the colors in the array. The default is a space color.
shadowColor: "red", / / shadow color
shadowOffsetX:0, / / the offset distance in the shadow horizontal direction.
Shadowoffset: 0, / / the offset distance in the shadow vertical direction
shadowBlur:10, / / the blur size of the shape shadow.
opacity:1, / / graph transparency. Numbers from 0 to 1 are supported. When it is 0, the graph will not be drawn
};

grid

grid=[{
show:true, / / show
zlevel:0, / / Canvas layer of the graph. The large Canvas of zlevel will be placed on top of the small Canvas of zlevel
z:2, / / the Z-layer of the component to which it belongs. The figure with a small Z value will be overwritten by the figure with a large Z value
Left: "10%", / / the distance between the component and the left side of the container, percentage 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", / / the distance between the component and the lower side of the container, percentage string or integer number
Width: "auto", / / legend width
Height: "auto", / / legend height
Containerlabel: true, / / whether the grid area contains the scale label of the axis,
backgroundColor: "transparent", / / Title background color
Bordercolor: "double CCC", / / border color
Border width: 0, / / border width
shadowColor: "red", / / shadow color
shadowOffsetX:0, / / offset distance in shadow horizontal direction
Shadowoffset: 0, / / the offset distance in the shadow vertical direction
shadowBlur:10, / / blur size of shadow
Toolip: {/ / specific toolip settings in the coordinate system
show:true, / / whether to display prompt box components, including prompt box float and axisPointer
Trigger: "axis", / / trigger type none does not trigger the "item" data item graph. It is mainly used in scatter chart, pie chart and other charts without category axis. "Axis" coordinate axis is triggered, mainly used in the chart where the category axis will be used for histogram, line chart, etc.
Position: ['50% ','50%'], / / the position of the floating layer of the prompt box. If it is not set by default, the position will follow the position of the mouse, [10, 10], drop back the function, the internal center position of the figure where the inside mouse is located, the upper side, left side, lower side and right side of the figure where the top, left, bottom and right mouse are located,
formatter:"{b0}: {c0}
{b1}: {c1} ", / / the floater content formatter of the prompt box supports two forms: String template and callback function. Template variables include {a}, {b}, {c}, {d}, {e}, respectively representing series name, data name, data value, etc
backgroundColor: "transparent", / / Title background color
Bordercolor: "double CCC", / / border color
Border width: 0, / / border width
padding:5, / / legend inner margin in PX 5 [5, 10] [5, 10, 5, 10]
textStyle:mytextStyle, / / text style
},
}];

X axis

xAxis=[
    {
        show:true,                //Show x axis or not
        gridIndex:0,              //The index of the grid where the x axis is located, which is the first grid by default
        position:"bottom",       //Position of the x-axis. "top", "bottom", the first X-axis in the default grid is below the grid ('bottom '), and the second x-axis is placed on the other side according to the position of the first x-axis
        offset:0,                 //Offset of x-axis relative to the default position, useful when there are multiple X-axes on the same position
        type:"category",         //Axis type. 'value' value axis for continuous data. The 'category' category axis is applicable to discrete category data. When it is of 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 has the format of time, which is different in scale calculation. For example, the scale of month, Sunday, day or hour range will be determined according to the span range. 'log' alignment. For logarithmic data
        name:'time',               //Axis name
        nameLocation:"end",       //The axis name displays the location. Options: 'start','middle','end'
        nameTextStyle:mytextStyle,  //Text style for axis names
        nameGap:15,                  //Distance between axis name and axis
        nameRotate:0,                //Axis name rotation, angle value
        inverse:false,              //Is it a reverse axis
        boundaryGap:true,           //boundaryGap in the category axis can be configured as true and false. Non category axis, including time, value, and for number axis, boundaryGap is an array of two values, representing the extension range of data minimum value and maximum value respectively. You can directly set the value or relative percentage, which is invalid after setting min and max ['20%,'20% ']
        min:null,                    //Axis scale minimum. It can be set to the special value 'dataMin'. At this time, the minimum value of data on this axis is taken as the minimum scale. When not set, the minimum value will be calculated automatically to ensure the uniform distribution of coordinate axis scale. In the category axis, it can also be set as the ordinal number of the category
        max:null,                   //Axis scale maximum. It can be set to the special value 'dataMax'. At this time, the maximum value of data on this axis is taken as the maximum scale. When not set, the maximum value will be calculated automatically to ensure the uniform distribution of coordinate axis scale. In the category axis, it can also be set as the ordinal number of the category
        scale:false,                //Valid only in the value axis (type: 'value'). Whether it is out of 0 value scale. When set to true, the coordinate scale does not force a zero scale. It is more useful in the scatter diagram of double numerical axis. The configuration entry is not valid after min and max are set.
        splitNumber:5,             //It should be noted that the number of segments of the coordinate axis is only an estimated value, and the number of segments actually displayed will be adjusted based on the readability of the scale display of the coordinate axis after segmentation
        minInterval:0,             //For example, it can be set to 1 to ensure that the axis division scale is displayed as an integer. Valid only in the value axis (type: 'value').
        logBase:10,                 //For the base of the number axis, only valid for the number axis (type: 'log')
        silent:false,              //Whether the coordinate axis is static cannot be interactive
        triggerEvent:false,       //Does the label of the axis respond to and trigger mouse events
        axisLine:{                 //Coordinate axis
            show:true,             //Show Axis axis or not
            onZero:true,           //Whether the axis of X-axis or Y-axis is on the 0 scale of another axis is valid only when the other axis is a numerical axis and contains the 0 scale
            lineStyle:mylineStyle
        },
        axisTick :{                 //Axis scale related settings
            show:true,              //Whether axis scale is displayed.
            alignWithLabel:false,  //The category axis is valid when boundaryGap is true, which can ensure the alignment of tick marks and labels
            interval:auto,          //Display interval of coordinate axis scale, valid in category axis. By default, labels are displayed at policy intervals where 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", if the value is 2, it means display one label every two labels, and so on
            inside:false,           //Whether the axis scale is facing in or not, the default is facing out.
            length:5,                //The length of the axis scale.
            lineStyle:mylineStyle
        },

Scale label

    axisLabel:{                 //Related setting of axis scale label
        show:true,              //Whether to display
        interval:"auto",        //Display interval of axis scale label, valid in category axis. By default, labels are displayed at policy intervals where 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", if the value is 2, it means display one label every two labels, and so on
        inside:false,           //Whether the scale label is facing in, and the default is facing out
        rotate:0,               //The rotation angle of the scale label can prevent the labels from overlapping when the category labels of the category axis cannot be displayed. Rotate from - 90 degrees to 90 degrees
        margin:8,               //Distance between scale label and axis
        formatter: function (value, index) {            //Using the function template, the function parameters are scale values (categories) and scale indexes
            return value+"kg";
        },
        showMinLabel:null,      //Whether to display the label of the minimum tick. The value can be true, false or null. Default auto determination (i.e. if the labels overlap, the label of the smallest tick will not be displayed)
        showMaxLabel:null,      //Whether to display the label of the maximum tick. The value can be true, false or null. Default auto determination (i.e. if the labels overlap, the label of the largest tick will not be displayed)
        textStyle:mytextStyle
    },
    splitLine:{                 //The separation line of the axis in the grid area.
        show:true,              //Whether the separator line is displayed. The default value axis is displayed, and the category axis is not.
        interval:"auto",        //The display interval of the axis separator, which is valid in the category axis. By default, labels are displayed at policy intervals where 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 a label every other label". You can use a numeric value to represent the data of the interval, or you can use a callback function to control it. The format of the callback function is as follows:
        lineStyle:mylineStyle
    },
    splitArea:{                 //The separated area of the coordinate axis in the grid area, which is not displayed by default.
        interval:"auto",
        show:false,             //Show separated area or not
        areaStyle:myareaStyle
    },
    data : ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],             //Category data, valid in the category axis (type: 'category').
    zlevel:0,                   //The zlevel value of all drawings on the X axis.
    z:0,                        //z value of all graphs of the X-axis component
}

];
Yaxis = xaxis; / / the configuration of y-axis is the same as that of x-axis

Reprint: https://my.oschina.net/u/3720923/blog/2246864