Echarts Data visualization Visualmap, develop full solution + perfect annotation

Full stack Engineer Development Manual (author: Shangpeng)

Echarts Data visualization Development Code annotation Full Solution
Full solution of Echarts data visualization development parameter Configuration

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

5 Large coordinate system (click to enter):
Geo-detailed geographical coordinate system, grid rectangular coordinate system (Xaxis, YAxis) detailed, parallel parallel coordinate system, polar polar coordinate system, radar radar coordinate system

19 Types of chart type (click to enter, to be continued):
Series-bar Column Chart detailed, Series-effectscatter special effects scatter plot, Series-graph diagram, Series-heatmap Thermal Force, Series-line line map, Series-map maps, Series-pie pie chart, Series-radar radar chart, Series-scatter scatter plot

Chart behavior and chart events:
Action graph behavior, event chart events echarts data visualization visualmap Full solution:

visualmap=[//Visual Mapping Component for "visual coding", that is, mapping data to visual elements. The visual element can be: symbol: The graphic category of the entity. Symbolsize: Size of the entity.
                                                 Color: The colors of the entities. Coloralpha: The transparency of the color of the entity. Opacity: The transparency of the entity and its appendages, such as text labels. Colorlightness: The intensity of the color. Colorsaturation: The saturation of the color.
    Colorhue: The hue of the color. {show:true,//whether to display the visualmap-continuous component.                                  If set to False, it is not displayed, but the function of the data map still exists type: ' continuous ',//defined as continuous Viusalmap min:10, Specifies the allowable minimum value for the Visualmapcontinuous component max:100,//Specify Visualma The maximum allowable value for the Pcontinuous component range:[15, 40],//Specifies the position of the handle's corresponding numeric value.                          Range should be calculable:true in min Max range,//whether or not to display the drag-and-drop handle (the handle can be dragged to adjust the selection) Realtime:true,                             When dragging, whether to update inverse:false in real time,//whether to reverse Visualmap component precision:0, Decimal for data displayPrecision, the default is 0, no decimal point itemwidth:20,//graphic width, that is, the width of the strip.
        itemheight:140,//The height of the graph, that is, the height of the strip. Align: "auto",//Specifies the position of the handle and text in the assembly. The optional value is: ' Auto ' automatically determines. The ' left ' handle and label are on the right. ' Right ' handle and label on left. The ' top ' handle and label are below.
        ' Bottom ' handle and label on.
        text:[' High ', ' low '],///At both ends of the text textgap:10,///The distance between the two text bodies, PX Dimension:2,//Specifies the "which dimension" of the data to map to the visual element. "Data" is series.data. You can interpret series.data as a two-dimensional array, where each column is a dimension, and the default is to take the last dimension in data seriesindex:1,//Specify which series of data to take, that is, which series
        Series.data, default to all series Hoverlink:true,//mouse hover over the Visualmap component, the corresponding value of the mouse position in the chart corresponding to the graphic elements, will be highlighted
            inrange:{//defines the visual element color in the selected range: [' #121122 ', ' Rgba ' (3,4,5,0.4) ', ' Red '],
            Symbolsize: [M]}, outofrange:{//define visual elements that are outside the selected range. Color: [' #121122 ', ' RGBA (3,4,5,0.4) ', ' Red '], symbolsize: [m]}, zlevel:0,// The Canvas layer of the owning graph, the Zlevel large Canvas will be placed above the Zlevel Canvas,//z hierarchy of the owning component, Z-value Small graphics will be covered with a large Z-value graph: "Center",//component distance from the left side of the container, ' leave ', ' center ', ' right ', ' 20% ' to                               P: "Top",//components from the side of the container from the distance, the ' upper ', ' Middle ', ' bottom ', ' 20% ' right: "Auto", Component distance from the right side of the container, ' 20% ' bottom: ' auto ',//component distance from the lower side of the container, ' 20% ' Orient : "Vertical",//legend arrangement Direction Padding:5,//legend inner margin, Unit px 5 [5, 10                         ] [5,10,5,10] backgroundcolor: "Transparent",//title background color bordercolor: "#ccc",                      Border color borderwidth:0,//Border line width Textstyle:mytextstyle, Text Style Formatter: function (value) {//Label formatting tool.                    Return ' AAAA ' + value;
        The range label displays the content. }}, {show:true,//whether to display the visualmap-continuous component.                      If set to False, it is not displayed, but the function of the data map still exists type: ' piecewise ',//defined as segmented Visualmap splitnumber:5, For continuous data, the automatic average cut is divided into several segments.
            The default is 5 segment pieces: [//The range of each segment of the custom segmented visual mapping component (Visualmappiecewise), and the text for each paragraph, and the special style for each paragraph.
            {min:1500},//Do not specify Max, which means Max is infinite (Infinity). {min:900, max:1500}, {min:310, max:1000}, {min:200, max:300}, {min:10, max:200
            , Label: ' 10 to 200 (custom label) '}, {value:123, Label: ' 123 (custom special color) ', Color: ' Grey '},//= case value equals 123.
        {Max:5}//Do not specify Min, which means Min is infinite (-infinity). ], categories:[' serious pollution ', ' heavy pollution ', ' moderate pollution ', ' mild pollution ', ' good ', ' excellent ',//used to represent discrete data (or can be called category data, enum-typeThe complete min:10 of the data),//Specifies the allowable minimum value of the Visualmapcontinuous component max:100,
        Specify the maximum allowable value for the visualmapcontinuous component Minopen:true,//interface will have an extra "< min" Selected block
        Maxopen:true,//interface will have an extra "> Max" selected block. Selectedmode: "Multiple",//Selection mode, can be: ' Multiple ' (multiple selection).
        ' Single ' (radio).
        Inverse:false,//Whether reverse Visualmap component precision:0,//Data display decimal precision, defaults to 0, no decimal point
        ITEMWIDTH:20,//The width of the graphic, that is, the width of the bar.
        itemheight:140,//The height of the graph, that is, the height of the strip. Align: "auto",//Specifies the position of the handle and text in the assembly. The optional value is: ' Auto ' automatically determines. The ' left ' handle and label are on the right. ' Right ' handle and label on left. The ' top ' handle and label are below.
        ' Bottom ' handle and label on. text:[' High ', ' low '],///At both ends of the text textgap:10,///The distance between the two text bodies, in PX showl            Abel:true,//whether to display the text label itemgap:10 for each item,              The space between each two entities is PX Itemsymbol: "RoundRect",//default graphics. The optional values are: ' Circle ', ' rect ', ' roundrect ', ' triangle ', ' diamond ', ' pin ', ' arrow ' dimension:2,/ /Specifies the "which dimension" of the data to map to the visual element. "Data" is series.data. You can interpret series.data as a two-dimensional array, where each column is a dimension, and the default is to take the last dimension in data seriesindex:1,//Specify which series of data to take, that is, which series of SE Ries.data, by default to all series Hoverlink:true,//mouse hover over the Visualmap component, the corresponding value of the mouse position in the chart corresponding to the graphic elements, will highlight I
            nrange:{//defines the visual element color in the selected range: [' #121122 ', ' Rgba ' (3,4,5,0.4) ', ' Red '],
            Symbolsize: [M]}, outofrange:{//define visual elements that are outside the selected range.                                   Color: [' #121122 ', ' Rgba (3,4,5,0.4) ', ' Red '], symbolsize: [m]}, zlevel:0,                                         The Canvas layering of the graphics, Zlevel large Canvas will be placed on the Zlevel small Canvas above Z:2, Z-Hierarchy of the owning component, small Z-valueGraphics will be covered by Z-valued graphics left: "Center",//component's distance from the container's left-hand side, ' leave ', ' center ', ' right ', ' 20% ' top                               : "Top",//components from the side of the container from the distance, the ' upper ', ' Middle ', ' bottom ', ' 20% ' right: "Auto", Component distance from the right side of the container, ' 20% ' bottom: ' auto ',//component distance from the lower side of the container, ' 20% ' Orient:  "Vertical",//legend arrangement Direction Padding:5,//legend inner margin, Unit px 5 [5, 10]                         [5,10,5,10] BackgroundColor: "Transparent",//title background color bordercolor: "#ccc", Border color borderwidth:0,//Border line width textstyle:mytextstyle,//
            Text style formatter:function (value) {//Label formatting tool.                   Return ' AAAA ' + value;
        The range label displays the content.
 }
    }
];