Echarts data visualization series-effectscatter effect scatter plot, develop full solution + perfect annotation

Full Stack Engineer Development Handbook (author: Shangpeng)

Echarts Data visualization Development code Comment Full Solution
Echarts Data visualization Development parameter configuration full solution

6 Large public components (click to enter):
Title detailed, tooltip detailed, toolbox detailed, Legend detailed, Datazoom detailed, Visualmap full solution

5 Large coordinate system detailed (click to enter):
Geographic coordinate system Geo detailed, grid Cartesian coordinate system (Xaxis, YAxis) detailed, parallel parallel coordinate system details, polar polar coordinate system detailed, radar radar coordinate system

Detailed description of 19 chart types (click to enter, to be continued):
Series-bar Column Chart details, series-effectscatter effects scatter plot, series-graph diagram, Series-heatmap heat force diagram, Series-line Line chart, Series-map map, Series-pie pie chart, Series-radar radar, Series-scatter scatter plot

Chart behavior and chart events:
Action chart behavior, event chart events echarts data visualization series-effectscatter effect scatter plot full solution:

mytextstyle={color: "#333",//Text color fontstyle: "Normal",//italic italic oblique tilt fontweight: "Normal",//text thickness bold Bolder lighter 100 | 200 | 300 |
fontFamily: "Sans-serif",//font family fontsize:18,//font size}; mylinestyle={color: "#333",//Color, ' rgb (+, +, +) ', ' Rgba (128, 128, 128, 0.5) ', support linear gradient, radial gradient, texture fill sh
    Adowcolor: "Red",//Shadow color shadowoffsetx:0,//offset distance in the horizontal direction of the shadow.
    shadowoffsety:0,//shadow offset distance in vertical direction shadowblur:10,//blur size of the graph shadow.                  Type: "SOLID",//coordinate axis line types, solid,dashed,dotted width:1,//coordinate axis line width opacity:1, Graphic transparency.
Supports numbers from 0 to 1, which is 0 without drawing the graph}; myareastyle={color:[' Rgba (250,250,250,0.3) ', ' Rgba (200,200,200,0.3) '],//separate area color. The delimited area loops the colors in the order of the colors in the array.
    The default is a shade of the interval color.
    Shadowcolor: "Red",//Shadow color shadowoffsetx:0,//offset distance in the horizontal direction of the shadow.
 shadowoffsety:0,//offset distance in the vertical direction of the shadow   Shadowblur:10,//blur size of the graphics shadow. Opacity:1,//graphic transparency.
Supports numbers from 0 to 1, which is 0 without drawing the graph};              myitemstyle={color: "Red",//Color bordercolor: "#000",//Border color borderwidth:0,
    The stroke width of the bar, which is not stroked by default.
    Bordertype: "SOLID",//the stroke type of bar, default to solid line, support ' dashed ', ' dotted '.
    barborderradius:0,//cylindrical border fillet radius, unit px, support incoming arrays specify 4 fillet radii, respectively.
    Shadowblur:10,//blur size of the graphics shadow.
    Shadowcolor: "#000",//Shadow color shadowoffsetx:0,//offset distance in the horizontal direction of the shadow.
    shadowoffsety:0,//shadow offset distance in the vertical direction. Opacity:1,//graphic transparency.
A number from 0 to 1 is supported, and the graphic is not drawn for 0.
};
    mylabel={Show:false,//Whether the label is displayed. Position: The location of the "inside",//label. Absolute pixel value [10, 10],//relative percentage [' 50% ', ' 50% ']. ' Top ', ' left ', ' right ', ' bottom ', ' inside ', ' insideleft ', ' insideright ', ' insidetop ', ' insidebottom ', ' insidetopleft ', ' Insidebottomleft ', ' insidetopright ', ' insidebottomright ' offset:[30, 40],//Whether the text is offset. The default is not offset. For example: [30, 40] Indicates that the text is shifted horizontally by 30, and the vertical offset is 40. Formatter: ' {B}: {C} ',//tag content formatter.
    The template variable has {a}, {B}, {C}, which represent series name, data name, data value, respectively.
Textstyle:mytextstyle}; mypoint={symbol: "pin",//Graphics ' circle ', ' rect ', ' roundrect ', ' triangle ', ' diamond ', ' pin ', ' Arrow ' sy
    MBOLSIZE:50,//the size of the tag can be set to a single number such as 10, can also be separated by an array of width and height, for example [20, 10] means that the mark width is 20, the height is 10. symbolrotate:0,//The rotation angle of the mark.
    Note that when symbol is ' arrow ' in Markline, Symbolrotate is forced to be set to the tangent angle. symboloffset:[0,0],//Mark offset relative to the original position.
    By default, the marker is centered at the location of the data silent:false,//The graphic does not respond to and triggers mouse events, and defaults to false, which responds to and triggers mouse events. label:{Normal:mylabel, Emphasis:mylabel}, itemstyle:{Normal:myitemstyle, Emphas
Is:myitemstyle}}; myline={symbol:["pin", "circle"],//Graphics ' circle ', ' rect ', ' roundrect ', ' triangle ', ' diamond ', ' pin ', ' arrow ' sym
    BOLSIZE:50,//the size of the tag can be set to a single number such as 10, can also be separated by an array of width and height, for example [20, 10] means that the mark width is 20, the height is 10. Precision:2,//marking number ofaccuracy, which is useful when displaying the mean line.
    Silent:false,//whether the graphics do not respond and trigger mouse events, the default is False, which is to respond to and trigger mouse events. label:{Normal:mylabel, Emphasis:mylabel}, linestyle:{Normal:mylinestyle, Emphas
Is:mylinestyle}};
    myarea={Silent:false,//whether graphics do not respond and trigger mouse events, the default is False, which is to respond to and trigger mouse events. label:{Normal:mylabel, Emphasis:mylabel}, itemstyle:{Normal:myitemstyle, Emphas
Is:myitemstyle}};
    series=[{type: "Effectscatter",//Effects scatter plot zlevel:0,//histogram zlevel values for all graphs. The z-value of all graphics for the z:2,//Histogram component. Controls the pre-and post-order of graphics.
    A graphic with a small Z-value is overwritten with a graphic with a large Z-value.
    Silent:false,//whether the graphics do not respond and trigger mouse events, the default is False, which is to respond to and trigger mouse events.
    Name: "Data Name",//Series name, for tooltip display, legend legend filter, used to specify the corresponding series when setOption updates data and configuration items.
    Legendhoverlink:true,//whether to enable the linkage highlighting when the legend hover.
    Hoveranimation:true,//whether to turn on the mouse hover animation effect.
    EffectType: "Ripple",//effect type, currently only supports ripple effect ' ripple '. ShoweffectoN: "Render",//configure when the effect is displayed. Optional: ' Render ' Displays the effects after the drawing is complete.
    ' Emphasis ' highlights (hover) When the effect is displayed.
        rippleeffect:{//Ripple effects related configuration.
        Period:4,//animation time.
        The maximum scale of the ripple in the scale:2.5,//animation.
    Brushtype: ' Fill ',//ripple drawing, optional ' stroke ' and ' fill '. }, CoordinateSystem: "Geo",//' cartesian2d ' uses a two-dimensional Cartesian coordinate system.
    ' Geo ' uses the geographic coordinate system xaxisindex:0,//index of the x-axis used, which is useful when there are multiple X-axes in a single chart instance.
    yaxisindex:0,//uses the index of the y-axis, which is useful when there are multiple Y-axes in a single chart instance.
    polarindex:0,//uses the index of the polar coordinate system, which is useful when there are multiple polar coordinate systems in a single chart instance.
    geoindex:0,//uses the index of the geographic coordinate system, which is useful when multiple geographic coordinate systems exist in a single chart instance.
    calendarindex:0,//uses the index of the calendar coordinate system, which is useful when multiple calendar coordinate systems exist in a single chart instance.              Symbol: "pin",//Graphics ' circle ', ' rect ', ' roundrect ', ' triangle ', ' diamond ', ' pin ', ' arrow ' symbolsize:50,
    The size of the tag can be set to a single number such as 10, or can be separated by an array of width and height, for example [20, 10] indicates a mark width of 20, and a height of 10. symbolrotate:0,//The rotation angle of the mark. Note that when symbol is ' arrow ' in Markline, it is ignoredThe Symbolrotate force is set to the angle of the tangent. symboloffset:[0,0],//Mark offset relative to the original position. By default, the marker is centered in the location of the data large:false,//whether to turn on the optimization of large-scale scatter graphs, when the data graphics are particularly large (>=5k) can be opened. The Largethreshold is optimized for drawing when the data volume is greater than the specified threshold value.
    Disadvantage: You cannot customize the style of individual data items after optimization.
    largethreshold:2000,//Turn on the Draw optimization threshold. Cursor: "Pointer",//mouse hover when on the graphic element when the mouse style is what.
    Cursor with CSS.
    label:{//Graphic text label, can be used to illustrate some of the graphics data information, such as value, name, etc., Normal:mylabel, Emphasis:mylabel},
        itemstyle:{//graphic style, normal is the shape of the default state of the style, emphasis is a graphic in the highlighted state of the style, such as when the mouse hover or legend linkage highlighting. Normal:myitemstyle, Emphasis:myitemstyle,}, encode: {//can define which dimension of data is encoded into what X
        : [3, 1, 5],//indicates that the dimension 3, 1, 5 are mapped to the x-axis.
        Y:2,//indicates that dimension 2 maps to the y-axis.
        tooltip: [3, 2, 4],//indicates that the dimension 3, 2, 4 will be displayed in the ToolTip.
    Label:3//Indicates that label uses Dimension 3. }, data: [//Each column is called a "dimension". Dimension subscript starting from 0 [12, 44, 55, 66, 2], [23, 6, 16, 23, 1], [12, 44, 55, 66, 2], [23, 6, 16, 23, 1], [12, 44, 55, 66, 2], [6, 1],//markpoint: Same bar//markline: Same bar//markarea: Same bar Tooltip:tooltip},];