Echarts data visualization grid Cartesian coordinate system (xAxis, yAxis), echartsxaxis

Echarts data visualization grid Cartesian coordinate system (xAxis, yAxis), echartsxaxis

MytextStyle = {color: "#333", // text color fontStyle: "normal", // italic oblique skew fontWeight: "normal ", // text width bold bolder lighter 100 | 200 | 300 | 400... fontFamily: "sans-serif", // fontSize: 18, // font size}; mylineStyle = {color: "#333", // color, 'rgb (128,128,128) ', 'rgba (128,128,128, 0.5)', supports linear gradient, radial gradient, texture filling shadowColor: "red", // shadowOffsetX: 0, // The offset distance in the horizontal direction of the shadow. ShadowOffsetY: 0, // blur the shadowBlur from the vertical direction of the shadow. Type: "solid", // axis line type, solid, dashed, dotted width: 1, // axis line width opacity: 1, // graphic transparency. Supports numbers from 0 to 1. If the value is 0, this image is not drawn.}; myareaStyle = {color: ['rgba (250,250,250, 0.3) ', 'rgba (200,200,200, 0.3) '], // separated area color. The separation area cyclically sets the color in the order of colors in the array. The default color is an interval. ShadowColor: "red", // shadowOffsetX: 0, // the offset of the shadowOffsetX in the horizontal direction of the shadow. ShadowOffsetY: 0, // blur the shadowBlur from the vertical direction of the shadow. Opacity: 1, // graphic transparency. Supports numbers from 0 to 1. If the value is 0, this image is not drawn.}; grid = [{show: true, // whether zlevel: 0 is displayed, // The Canvas layer of the image to which the image belongs. The Canvas with a large zlevel will be placed on the top of the Canvas with a small zlevel z: 2, // The z layer of the component to which the image belongs, A graph with a small z value will be overwritten by a graph with a large z value. left: "10%", // The distance between the component and the left of the container. The percentage string or integer value is top: 60, // The component's distance from the container's upper side, percentage string or integer number right: "auto", // The component's distance from the right side of the container, percentage string or Integer Number bottom: "auto", // component distance from the lower side of the container, percentage string or integer number width: "auto", // legend width height: "auto", // legend height containLabel: true, // whether the grid area contains the scale label of the coordinate axis, backgroundCo Lor: "transparent", // Title background color borderColor: "# ccc", // border color borderWidth: 0, // Border Width shadowColor: "red ", // shadowOffsetX: 0, // The offset from shadowOffsetY to shadow in the horizontal direction: 0, // The offset from shadowBlur to shadowBlur in the vertical direction is 10, // blur the shadow size tooltip: {// set show: true for a specific tooltip in the coordinate system, // 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. It is mainly used in charts with no category axes, such as scatter plots and pie charts. The 'axis 'axis is triggered. It is mainly used in bar charts, line charts, and other charts that use category axes. Position: ['000000', '000000'], // The position of the floating layer in the prompt box. If this parameter is not set by default, the position will follow the mouse position. [10, 10], return to the function, the inside mouse is in the center of the image. top, left, bottom, and right are in the top, left, bottom, right, and formatter: "{b0 }: {c0} <br/> {b1 }:{ c1} ", // The content formatter at the floating layer of the prompt box. The string template and callback function are supported, template variables include {a}, {B}, {c}, {d}, and {e}, indicating the series name, data name, data value, and other backgroundColor: "transparent ", // Title background color borderColor: "# ccc", // border color borderWidth: 0, // Border Width padding: 5, // legend padding, unit: px 5 [5, 10] [5, 10, 5, 10] textStyle: mytextStyle ,/ /Text style },}]; xAxis = [{show: true, // whether to display the index of the grid with the x axis gridIndex: 0, // the x axis, the default position is the first grid position: "bottom", // The position of the x axis. "Top", "bottom", the first x axis in the grid is under the grid ('bottom ') by default '), the second x axis is based on the offset of the first x axis on the other side: 0, // the offset of the X axis relative to the default position, type: "category", // coordinate axis type when multiple X axes exist on the same position. 'Value' value axis, applicable to continuous data. The 'category' category axis is applicable to discrete category data. You must use data to set category data for this type. // 'Time' timeline, suitable for continuous time series data. Compared with the numerical axis, the timeline is formatted with time, which is also different in the scale calculation, for example, the scale of the month, week, day, or hour range is determined based on the span range. The 'log' pair number axis. This parameter is applicable to the display position of the log data name: 'time', // coordinate axis name nameLocation: "end", // coordinate axis name. Optional: 'start', 'middle', 'end' nameTextStyle: mytextStyle, // The text style nameGap of the coordinate axis name: 15, // The distance between the coordinate axis name and the axis: nameRotate: 0, // coordinate axis name rotation, angle value inverse: false, // whether it is reverse coordinate axis boundaryGap: true, // boundaryGap in category axis can be set to true and false. Non-category axis, including time, value, logarithm axis, boundaryGap is an array of two values, indicating the Extended Range of the minimum and maximum values of the data, you can directly set the value or relative percentage, after min and max are set, the value ['20170301', '20160301'] min: null, // minimum value of the Axis scale is invalid. You can set it to a special value 'datamin'. At this time, take the minimum value of the data on this axis as the minimum scale. If this parameter is not set, the minimum value is automatically calculated to ensure the even distribution of the Axis scale. In the category axis, you can also set the category sequence max: null, // maximum coordinate axis scale. You can set it to a special value 'datamax '. At this time, take the maximum value of the data on this axis as the maximum scale. If this parameter is not set, the maximum value is automatically calculated to ensure the even distribution of the Axis scale. In the category axis, you can also set it to the class's ordinal scale: false, // only valid in the value axis (type: 'value. Whether the ratio is 0. After the value is set to true, the coordinate scale does not contain a zero scale. It is useful in scatter plots with double numeric axes. The configuration item is invalid after min and max are set. SplitNumber: 5, // Number of split segments in the coordinate axis. Note that the number of split segments is only an estimated value, finally, the number of segments actually displayed will be adjusted based on the easy-to-read degree displayed on the split coordinate axis scale after minInterval: 0, // The minimum interval of the automatically calculated coordinate axes, for example, you can set it to 1 to ensure that the coordinate axis split scale is displayed as an integer. Valid only in the value axis (type: 'value. LogBase: 10, // The base number of The number axis. It is valid only for the type: 'log' of the number axis. silent: false, // whether the coordinate axis is static and cannot interact triggerEvent: false, // whether the axis label responds to and triggers the mouse event axisLine: {// coordinate axis show: true, // whether to display the axis onZero: true, // whether the axis of the X or Y axis is on the 0 scale of the other axis. The lineStyle: mylineStyle} is valid only when the other axis is a numerical axis and contains a 0 scale. axisTick: {// show: true, // whether to display the axis scale. AlignWithLabel: false, // It is valid when boundaryGap is true in the category axis. It can ensure that the dial line and label are aligned with interval: auto, // The display interval of the Axis scale, which is valid in the category axis. By default, labels are displayed at non-overlapping policy intervals. You can set it to 0 to forcibly display all labels. If it is set to 1, it indicates "One tag is displayed for each other". If the value is 2, it indicates that one tag is displayed for each other, and so on inside: false, // whether the axis scale is in the inner direction. The default value is in the outward direction. Length: 5, // The length of the coordinate axis scale. LineStyle: mylineStyle}, axisLabel: {// show: true, // whether to display the interval: "auto", // The display interval of the Axis scale label, valid in category axis. By default, labels are displayed at non-overlapping policy intervals. You can set it to 0 to forcibly display all labels. If it is set to 1, it indicates "One tag is displayed for each other". If the value is 2, it indicates that one tag is displayed for each other, and so on inside: false, // whether the scale label is in the inner direction. The default value is 0. // The Rotation Angle of the scale label. When the category label of the category axis cannot be displayed, the labels can be rotated to prevent overlap. Rotation Angle 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 return value + "kg" ;}, showMinLabel: null, // whether to display the minimum tick label. Optional values: true, false, and null. By default, it is automatically determined (that is, if tags overlap, the minimum tick label is not displayed) showMaxLabel: null, // whether to display the maximum tick label. Optional values: true, false, and null. By default, it is automatically determined (that is, if the label overlaps, the label with the maximum tick is not displayed) textStyle: mytextStyle}, splitLine: {// delimiter of the coordinate axis in the grid area. Show: true, // whether to display the separator line. The default value axis is displayed. The category axis is not displayed. Interval: "auto", // display interval of the Axis separator, which is valid in category axis. By default, labels are displayed at non-overlapping policy intervals. You can set it to 0 to forcibly display all labels. If it is set to 1, it indicates "display a tag after a tag". You can use a value to represent the data at the interval or use a callback function to control the data. The callback function format is as follows: lineStyle: mylineStyle}, splitArea: {// separated regions of the coordinate axes in the grid area, which is not displayed by default. Interval: "auto", show: false, // whether to display the separated areas areaStyle: myareaStyle}, data: ['monday', 'tues', 'wedday', 'thurday ', 'Friday', 'saturday', 'sunday'], // category data, which is valid in category axis (type: 'category. Zlevel: 0, // zlevel value of all images on the X axis. Z: 0, // z value of all images of the X axis component}]; yAxis = xAxis; // the content of the Y axis configuration is the same as that of the X axis