ECharts使用心得

2021-06-22 22:11:05 字數 2010 閱讀 7158

上週專案組要臨時給客戶做乙個演示的原型,首頁設計的是乙個中國地圖,本來打算用谷歌的地圖,但是,做出來之後,整體的效果看起來太差了,最後就在網上搜相關的地圖呈現的控制項,然後就找到了這個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標籤之外,否則圖形是顯示不出來的。

除了地圖圖表之外的其他的圖示的使用方式都差不多。事實上其他的圖表跟地圖圖表的區別在於對配置檔案的引用。這裡只做乙個折線圖的示例,其它的示例都是一樣的。

好了,今天就總結到這裡了,希望能給大家帶來一些幫助。這裡主要是介紹地圖控制項的使用,因為其官方文件上關於路徑的配置寫的很不清楚,所以才會想把這些走的彎路給總結一下。對於其他的圖表控制項的使用都很簡單,大家可以參考官方的文件。

ECharts使用心得

上週專案組要臨時給客戶做乙個演示的原型,首頁設計的是乙個中國地圖,本來打算用谷歌的地圖,但是,做出來之後,整體的效果看起來太差了,最後就在網上搜相關的地圖呈現的控制項,然後就找到了這個echarts報表呈現元件,挺不錯的乙個元件,而且地圖資料都是離線的,真心很讚。但是,使用起來卻頗費了一番工夫。所以...

echarts 使用心得

echarts 是使用canvas繪圖的,所以放置在背景容器的css背景不會被顯示出來,所以如果需要顯示背景。可以使用設定,背景是乙個dom元素。所以給這個dom設定背景就可以了。為了方便起見,如果在容器的下方放置乙個元素和容器使用一模一樣的樣式並設定好背景。之前擔心設定display none會設...

ECharts使用心得(一)

上週專案組要臨時給客戶做乙個演示的原型,首頁設計的是乙個中國地圖,本來打算用谷歌的地圖,但是,做出來之後,整體的效果看起來太差了,最後就在網上搜相關的地圖呈現的控制項,然後就找到了這個echarts報表呈現元件,挺不錯的乙個元件,而且地圖資料都是離線的,真心很讚。但是,使用起來卻頗費了一番工夫。所以...