熱線電話：13121318867

登錄
首頁精彩閱讀5分鐘輕松上手ECharts數據圖表系統
5分鐘輕松上手ECharts數據圖表系統
2016-05-06
收藏
5分鐘輕松上手ECharts數據圖表系統



最近在搗鼓各種插件各種框架，發現這個ECharts還是比較不錯的，文檔也挺全的，還是中文的，給大家推薦一下。

這篇文章是零基礎入門ECharts圖表的教程，先簡單介紹一下吧，可能有人還不知道這個東西。

【簡介】

ECharts，縮寫來自Enterprise Charts，商業級數據圖表，一個純Javascript的圖表庫，可以流暢的運行在PC和移動設備上，兼容當前絕大部分瀏覽器（IE6/7/8/9/10/11，chrome，firefox，Safari等），底層依賴輕量級的Canvas類庫ZRender，提供直觀，生動，可交互，可高度個性化定制的數據可視化圖表。創新的拖拽重計算、數據視圖、值域漫游等特性大大增強了用戶體驗，賦予了用戶對數據進行挖掘、整合的能力。

支持折線圖（區域圖）、柱狀圖（條狀圖）、散點圖（氣泡圖）、K線圖、餅圖（環形圖）、雷達圖（填充雷達圖）、和弦圖、力導向布局圖、地圖、儀表盤、漏斗圖、事件河流圖等12類圖表，同時提供標題，詳情氣泡、圖例、值域、數據區域、時間軸、工具箱等7個可交互組件，支持多圖表、組件的聯動和混搭展現。

好了，咱們重點不是介紹哈，后面我會詳細講解這個報表系統的使用，這里就不做過多的描述了，下面開始進入正題：“5分鐘上手寫ECharts的第一個圖表”。

【方法一：模塊化單文件引入(推薦)】

1. 新建一個echarts.html文件，為ECharts準備一個具備大小(寬高)的Dom：

2. 新建<script>標簽引入模塊化單文件echarts.js：

3. 新建<script>標簽中為模塊加載器配置echarts和所需圖表的路徑(相對路徑為從當前頁面鏈接到echarts.js)：

4. <script>標簽內動態加載echarts和所需圖表，回調函數中可以初始化圖表并驅動圖表的生成：

5. 瀏覽器中打開ecarts.html，就可以看到以下效果：

【方法二：標簽式單文件引入】

1. 新建一個echarts.html文件，為ECharts準備一個具備大小(寬高)的Dom。

2. 新建<script>標簽引入echart-all.js。

3. 新建<script>，使用全局變量echarts初始化圖表并驅動圖表的生成。

4. 瀏覽器中打開echarts.html，可以看到如下效果：

 


CDA數據分析師考試相關入口一覽（建議收藏）：

? 想報名CDA認證考試，點擊>>>   “CDA報名” 了解CDA考試詳情；

? 想學習CDA考試教材，點擊>>> “CDA教材” 了解CDA考試詳情；

? 想加入CDA考試題庫，點擊>>> “CDA題庫” 了解CDA考試詳情；

? 想了解CDA考試含金量，點擊>>> “CDA含金量” 了解CDA考試詳情；

echarts 氣泡圖 折線圖 柱狀圖 漏斗圖 散點圖 條狀圖 數據可視化

數據分析咨詢請掃描二維碼

若不方便掃碼，搜微信號：CDAshujufenxi

上一篇圖論在大數據分析中的作用！
下一篇CDA認證再升一檔！與國家共同推進大數據人才培養標準教育事業！
數據分析師考試動態
CDA報考指南
數據分析學習
數據分析師資訊
更多

CDA教育閉環

常見問題

關于我們

CDA數據分析師公眾號

  • CDA數據分析師公眾號

CDA考試中心小程序

  • CDA考試中心服務號

CDA數據分析師App下載

  • CDA數據分析師App下載
Copyright © 2015-2021, www.ruiqisteel.com All Rights Reserved. CDA數據分析師(北京國富如荷網絡科技有限公司) 版權所有 京ICP備11001960號-9 京公網安備 11010802034615號 經營許可證編號：京B2-20210330
聯系電話：13321103290 (微信同號)

OK
客服在線
立即咨詢
日韩人妻系列无码专区视频,先锋高清无码,无码免费视欧非,国精产品一区一区三区无码
客服在線
立即咨詢