Example of echarts-heat Force diagram

1. Load Echarts.js

2. Page JS Code

//get the JSON data you need with Ajax$.get (".. /.. /.. /mall/querypagewtsrpost.do ", {                 ' Sdate ': Sdate,' Edate ': Edate},function(result, resultstate) {if(Resultstate = = "Success") {                    varResultjson =eval (result); if(resultjson!= ""){                         //add a picture that needs to implement a thermal distribution$ (' #graphic '). HTML ("<div id= ' main ' style= ' Width:1130px;height : 2500px; ' ></div> "); varHeatdata=NewArray ();//define array access background data                            //encapsulates the required data x: pixels from the right margin, y: pixels from the top margin, h: Heat                             for(vari = 0;i < resultjson.length; i++) {Heatdata[i]=[resultjson[i].x,resultjson[i].y,resultjson[i].h]; }                                                                                    //Echartsrequire ([' Echarts ',                                ' Echarts/chart/heatmap '//load bar module with bar chart, load on Demand                            ],                            function(EC) {//Initialize the Echarts chart based on the prepared Dom                                varMyChart = Ec.init (document.getElementById (' main '))); varoption ={title: {text:' Heat diagram Custom style '}, Series: [ {type:' Heatmap ', Data:heatdata, hover Able:false, gradientcolors: [{ Offset:0.4, Color:' Green '}, {offset:0.5, Color:' Yellow '}, {offset:0.8, Color:' Orange '}, {offset:1, Color:' Red '}], Minalpha:0.2, ValueScale:2, opacity:0.6                                            }                                        ]                                                        }; //loading data for Echarts objectsmychart.setoption (option);                        }                        ); }                                            }                                    });

3.html Code

<DivID= "Graphic"class= "Col-md-8"style= "width:1130px;margin:0 auto;float:none!important;">            <imgID= "Baidu-img"src= "./10086mall.png">            <DivID= "Main"style= "width:1130px; height:2500px;"></Div>        </Div>

4.

　

5. Finally, please explain

Note: These points in the figure are manually adjusted to the corresponding position, that is, the value of x, y in Heatdata to determine the location of the

Example of echarts-heat Force diagram