上週專案組要臨時給客戶做乙個演示的原型，首頁設計的是乙個中國地圖，本來打算用谷歌的地圖，但是，做出來之後，整體的效果看起來太差了，最後就在網上搜相關的地圖呈現的控制項，然後就找到了這個echarts報表呈現元件，挺不錯的乙個元件，而且地圖資料都是離線的，真心很讚。但是，使用起來卻頗費了一番工夫。所以就把使用中的一些心得體會跟大家分享一下。
這裡有以下幾點需要說明：
l 所有的跟echarts有關的檔案全部都在echarts資料夾下
l echarts資料夾的內容分為兩部分
1) 一部分是以echarts開頭的js檔案，這些檔案全部來自於1.中的echarts檔案目錄中的js資料夾下的檔案，也就是1.中的圖中紅框標註的js下的檔案。如下：
2) 另一部分是乙個名為zrender的資料夾，這裡需要特別注意的是該資料夾的命名必須為zrender，因為在echarts的js檔案中對zrender的引用都是以zrender為根目錄的，zrender資料夾的內容即為1.中zrender檔案目錄中的src資料夾下的內容，如下：
按照上邊的步驟配置過之後，我們就可以在頁面中引用了，這裡我主要是演示地圖控制項的使用方式，因為地圖的引用跟其他的基本圖形的引用不太一樣。其他的圖形的呈現也會做乙個簡要的演示。
首先在跟2中的echarts資料夾同乙個目錄（也就是modules資料夾）下新增乙個aspx頁或html頁，需要注意的是，如果是在aspx頁中使用echarts時，需要把要渲染的div放在form標籤之外，否則圖形是顯示不出來的。
3.1.1 在head標籤中新增對echarts的引用如下：
[csharp]view plain
copy
3.1.2 在body標記中，form標記之外，新增乙個div，用來做圖表渲染的容器。如下：
[csharp]view plain
copy
"main"style="height:500px;border:1px solid #ccc;padding:10px;">
……………
……………
3.1.3 在3.1.3中新增的div標記下，新增如下的js**段，如下：
[csharp]view plain
copy
3.1.4 完成以上操作之後，效果如下圖所示：
除了地圖圖表之外的其他的圖示的使用方式都差不多。事實上其他的圖表跟地圖圖表的區別在於對配置檔案的引用。這裡只做乙個折線圖的示例，其它的示例都是一樣的。
3.2.1 跟3.1.1一樣，引入echarts指令碼
3.2.2 跟3.2.2一樣，新增渲染圖表的div容器
3.2.3 在3.2.2新增的div下新增如下js**塊
[csharp]view plain
copy
"main1"style="height:500px;border:1px solid #ccc;padding:10px;">
"main2"style="height:500px;border:1px solid #ccc;padding:10px;">
3.2.4 完成以上操作之後效果圖如下：
好了，今天就總結到這裡了，希望能給大家帶來一些幫助。這裡主要是介紹地圖控制項的使用，因為其官方文件上關於路徑的配置寫的很不清楚，所以才會想把這些走的彎路給總結一下。對於其他的圖表控制項的使用都很簡單，大家可以參考官方的文件。
ECharts使用心得
上週專案組要臨時給客戶做乙個演示的原型，首頁設計的是乙個中國地圖，本來打算用谷歌的地圖，但是，做出來之後，整體的效果看起來太差了，最後就在網上搜相關的地圖呈現的控制項，然後就找到了這個echarts報表呈現元件，挺不錯的乙個元件，而且地圖資料都是離線的，真心很讚。但是，使用起來卻頗費了一番工夫。所以...
echarts 使用心得
echarts 是使用canvas繪圖的，所以放置在背景容器的css背景不會被顯示出來，所以如果需要顯示背景。可以使用設定，背景是乙個dom元素。所以給這個dom設定背景就可以了。為了方便起見，如果在容器的下方放置乙個元素和容器使用一模一樣的樣式並設定好背景。之前擔心設定display none會設...
ECharts使用心得（一）
上週專案組要臨時給客戶做乙個演示的原型，首頁設計的是乙個中國地圖，本來打算用谷歌的地圖，但是，做出來之後，整體的效果看起來太差了，最後就在網上搜相關的地圖呈現的控制項，然後就找到了這個echarts報表呈現元件，挺不錯的乙個元件，而且地圖資料都是離線的，真心很讚。但是，使用起來卻頗費了一番工夫。所以...