在學習完基礎的echarts的之后，我就比較感興趣如何將數據庫已經存儲好的數據傳遞過來，並且展示在地圖上。在尋找了很多的資料之后，最后找到了方法。（源碼在U盤里）
一、首先要有兩個js文件，分別是echarts.js和china.js,這兩個js文件的引用有一個可能會踩到的坑，並且很不容易找到解決方法，就是一定要將echart.js引用在china.js之前，因為只會有一小部分人或是有意或是無意的將順序搞反，所以不太容易找到方法。還需要一些jar包，就是下面這些，還有一些jQuery的js文件，也在下面；因為要連接數據庫，所以連接數據的jar包一定不要忘記。這樣准備工作就做好了。
二、之后就是用java代碼連接數據庫並取出數據了，這一步驟，和之前的連接數據庫方法一樣，采用Javabean，就是就是編寫bean層，dao層，其中bean層根據數據庫所要取出的數據類型，定義相對應的變量，以及set和get方法，這一部分比較簡單，之后就是編寫dao層，dao層中要寫連接數據庫的jdbc操作，之前學過的就很簡單了。然后要添加一個方法，這個方法的作用是查詢數據庫中相應的數據然后將每一組的數據都存放到之前自己定義bean變量中，最后將每一個bean變量組合成一個list<bean>的list集合（就是將所有的bean使用list的add方法，逐個添加），放在遍歷數據庫的循環中並不復雜，這樣dao層就編寫好了；
之后就是編寫hello層，這一層的作用是使用dao層的方法，從數據庫中取出數據並存儲到list集合之后，利用函數方法將list數據轉換為json數據。
三、下一步及時配置web.xml,定義dao層的請求的名稱，方法就是在web.xml中添加相應的代碼；比如：
<servlet>
<servlet-name>helloBar</servlet-name>
<servlet-class>com.helloBar.helloBar</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>helloBar</servlet-name>
<url-pattern>/bar.do</url-pattern>
</servlet-mapping>
<servlet-name>helloBar</servlet-name>，其中helloBar為java文件名稱，
<servlet-class>com.helloBar.helloBar</servlet-class>，要填寫文件位置；
<url-pattern>/bar.do</url-pattern>，bar.do 就是自己定義的請求名稱，之后會用到。
四、這樣一來，所有的數據准備就完成了，之后就要編寫HTML來進行地圖的繪制了；下面是地圖中series中data的代碼，只要將data的部分替換就好了，其中包含了ajax請求，下面的代碼我都做好了注釋，還是不難理解的。其中的廣西和廣東我是做的測試，看是否json格式正確，刪除也沒有影響。比較重要的就是頂一個json之后，添加數據的過程，主要流程是：先定義一個json數據，然后利用循環增加相應的json的數據長度，然后在用一次循環將請求到的數據添加剛才擴大長度的json數據中。這兩步驟盡量在兩個循環中完成，如果放到一個循環中會出現問題，目前不知道原因是什么，或是我自己的操作有問題。
data : (function(){ var jsonstr=[{"name":"廣西" ,"value" :200}, {"name":"廣東" ,"value" :400}]; console.log(jsonstr);//控制台輸出jsonstr $.ajax({ type : "post", async : false, //同步執行 url : "bar.do", data : {}, dataType : "json", //返回數據形式為json success : function(result) { if (result) { //根據ajax請求的得到的 newBean類型的list 長度，循環增加json數據的長度 //方法為定義一個類型一樣的json數據，然后 for(var j=0;j<result.length;j++) { var arr1 = { "name" : $('#names').val(), "value" : $('#values').val() } jsonstr.push(arr1); } //同上一步將目標json的擴容一樣，循環將從MySQL數據庫請求得到的數據添加到目標json中 //最后得到結果 for(var i=0;i<result.length;i++){ jsonstr[i+2].name=result[i].name; jsonstr[i+2].value=result[i].value; } console.log(jsonstr); } }, error : function(errorMsg) { alert("不好意思，大爺，圖表請求數據失敗啦!"); myChart.hideLoading(); } }) //在網頁的console 輸出最后的json結果，方便的出錯之后尋找問題 console.log(jsonstr); return jsonstr; })()
這樣就完成了，如果沒有顯示出來，可以使用 console.log(“ABC”); 方法來進行調試，這句代碼的意思是在網頁控制台輸出 相應的字符串ABC。
控制台在這，我控制輸出是其他的數據，並不是ABC，
最后結果展示：
