Use JS Baidu map information pop-up window to display echarts Chart in ASP Web development

Prior to the development of Webgis, mainly enterprise-level development, and for the public-level development platform, such as Baidu map, but very few.

Recently, a project on hand, there is an "electronic map" function, because the functional requirements are only information viewing and browsing, so the use of Baidu map, but in the development of a problem, is the information prompt window, to display the line chart, search a large circle there is no such example.

After thinking about it, because the information window is using HTML code, you can indirectly use the iframe to load a page containing the chart data, the final implementation of the function, the following is a preliminary example of the effect, followed by the UI designer to optimize processing.

Geoc.getlocation (Point, Function (RS) {var html = ["<div class= ' infoboxcontent ' ><div class= ' title ' ><s                   Trong> "+ deptname +" </strong></div> "," <table cellpadding= ' 0 ' cellspacing= ' 0 ' > " , "<tr><td width= ' 100px ' > Yesterday total electricity:</td><td>" + Yesterday + "(kwh) </td><td ro wspan= ' 2 ' ><div style= ' text-align:center; ' ></br><a target= ' _self ' href= ' energysavemain.aspx? Unitcode= "+ deptid +" ' > View </a></div></td></tr> "," <tr><td width= ' 10 0px ' > This month total electricity:</td><td> "+ Lastmonth +" (kwh) </td></tr> "," &LT;TR&GT;&LT;TD cols pan= ' 3 ' ><iframe width= ' 490px ' height= ' 200px ' frameborder= ' no ' border= ' 0 ' marginwidth= ' 0 ' marginheight= ' 0 ' scrolling= ' no ' scrolling= ' no ' src= ' charts.aspx '/></td></tr> "" </Table> "," </div> "];               InfoBox = new Bmaplib.infobox (map, Html.join (""), {boxstyle: {width: "500px", Height: "260px"} , Offset:new bmap.size (0, 170)//170 is the function of adjusting the popover up and down distance, Closeiconurl: ". /..     /images/map/close.png ", Enableautopan:true, align:infobox_at_top}); Infobox.open (point);});

here The main idea code is:

<iframe width= ' 490px ' height= ' 200px ' frameborder= ' no ' border= ' 0 ' marginwidth= ' 0 ' marginheight= ' 0 ' scrolling= ' no ' scrolling= ' no ' src= ' charts.aspx '/>

Use JS Baidu map information pop-up window to display echarts Chart in ASP Web development