整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
多企業在進行數據分析設計的時候，都特別青睞于用地圖來反映企業的營業收入情況，不僅有利于對于各個城市的營收情況，也能對地圖進行不同顏色的渲染，以此達到預警的效果。
今天小編用億信ABI給大家演示一遍如何設置html5地圖來展示企業的營業收入情況。億信ABI是億信華辰自主研發的一款從數據源接入，到數據采集、數據處理，再到數據分析和挖掘，打通數據生命周期的各個環節，實現數據填報、處理、分析一體化的一站式數據分析工具。
1、在億信華辰官網打開億信ABI的試用版本，點擊“數據分析”中的“圖表分析”，在左側的工具欄中添加統計圖組件，選擇html5地圖類型，將柱狀圖組件以拖拽到方式添加到報表模板中：
雙擊組件出現統計圖設置窗口，選擇“統計圖類型”后在左側欄中找到“地圖”這一項。選擇你需要的地圖類型，點擊確定。
目前有5種類型的html5地圖：流向圖，主干線圖，雙線圖，渲染圖，標點圖，3D地球。
2、html5地圖類型介紹
（1）流向圖：常用來可視化源匯流數據。源地和匯地可以是點，也可以是面。源地和匯地之間的互動數據，常用線段來表達，線的寬度或顏色來表示源地和匯地之間的流向數值，線段上可以使用自定義圖片如箭頭來表示流向方向。流向地圖多應用于區際貿易、交通流向、人口遷移、購物消費行為、通訊信息流動、航空線路等場景。
（2）主干線圖：帶主干線的地圖，用于查看地理位置信息之上定義的關系圖。
（3）渲染圖：地圖按區域指標數值大小以不同的顏色渲染來展示和區分，以起到預警的作用。
（4）標點圖：標點和地圖的結合，我們以地圖為背景，在上面標點。我們將標點展示在一個指定的地理區域內，標點里可以展示數值。
（5）3D地球：具3D效果的地球統計圖，外形如地球儀，會自動緩慢旋轉以展現世界地圖的全貌。
此處以渲染圖為例講解制作過程，其他類型的制作流程都大同小異。
3、html5地圖取數設置
重新回到工作區域，從右側的“基礎組件”中拖入一個分析區表格，在分析表拾取相應的主題表數據，根據地區維度浮動出指標值（設置“浮動維單元格”）。
雙擊“統計圖”，在統計圖設置中設置數據源，關聯做好的分析表格，如圖。
4、調整地圖配色
為了讓地圖的效果更好，通常會先選擇系統中提供的配色方案，然后再設置標題、微調背景墻壁、邊框和填充等的顏色樣式。如下圖所示，選擇需要的配色方案之后，在預覽中就能看到地圖的配色效果。
接著，可以在高級選項中，設置邊框和填充色，其他微調設置就不一一介紹。
5、其他設置
可以同時使用標點圖和渲染圖：添加兩個系列，分別選擇不同的系列類型。
還可以選擇地圖類型：
最后保存，計算。
顏色偏藍說明收入良好，偏黃說明狀況不佳。
如果你對億信華辰DEMO的效果感興趣，可以去官網詳細查看全新demo的技術解析，包括從導航頁到數據等的深度呈現如何實現等技巧。
今天的教程就到這里吧！希望對你有幫助哦~勤加練習，探索更多的解決辦法，彰顯你的數據天賦！小伙伴們，加油吧！
TML 代碼約定
很多 Web 開發人員對 HTML 的代碼規范知之甚少。
在2000年至2010年，許多Web開發人員從 HTML 轉換到 XHTML。
使用 XHTML 開發人員逐漸養成了比較好的 HTML 編寫規范。
而針對于 HTML5 ，我們應該形成比較好的代碼規范，以下提供了幾種規范的建議。
使用正確的文檔類型
文檔類型聲明位于HTML文檔的第一行：
<!DOCTYPE html>
如果你想跟其他標簽一樣使用小寫，可以使用以下代碼：
<!doctype html>
使用小寫元素名
HTML5 元素名可以使用大寫和小寫字母。
推薦使用小寫字母：
混合了大小寫的風格是非常糟糕的。
開發人員通常使用小寫 (類似 XHTML)。
小寫風格看起來更加清爽。
小寫字母容易編寫。
不推薦:
<SECTION>
<p>這是一個段落。</p>
</SECTION>
非常糟糕:
<Section>
<p>這是一個段落。</p>
</SECTION>
推薦:
<section>
<p>這是一個段落。</p>
</section>
除此之外，中星小編還介紹4款最受歡迎的HTML5/CSS3應用及代碼，一起來看看吧。
1、基于HTML5 Canvas的圖表插件Chart.js
chart.js是一款基于HTML5 Canvas的圖表插件，chart.js的功能非常強大，它不僅提供了常見的柱形圖、折線圖、餅狀圖，而且還提供了環形圖、雷達圖，樣式外觀多樣，圖表的色彩搭配也比較清新。chart.js還有一個特點就是圖表在初始化的時候有彈性動畫特效，這也是HTML5 Canvas的一大功勞。
柱形圖折線圖餅狀圖環形圖雷達圖極線圖
2、HTML5 3D動畫柱狀圖表
這次我們要分享一款很酷的HTML5 3D圖表應用，它是一款柱狀圖表，呈3D的外觀樣式，并且我們可以改變圖表的顏色主題，讓其更加符合你的需求。這款HTML5圖表可以切換需要查看的圖表數據，在切換的時候有不錯的動畫效果，而且，我們還可以切換圖表的大小，以適應不同大小的瀏覽窗口。
3、CSS3 3D環形進度條 帶進度百分比
這是一款基于純CSS3的環形進度條，而且，從外觀上看，這款進度條很有3D立體的感覺，尤其是在進度條上有立體的投影，顯得非常小巧迷人。另外，進度條的環形中央帶有進度百分比，可以實時根據進度來更新百分比的數值，和之前分享的HTML5/CSS3扇形進度條動畫相比有一定優勢。
4、純CSS3垂直Tab菜單 Tab樣式可自定義
Tab菜單在網頁上使用起來非常方便，也比較節省空間，所以很多門戶網站很喜歡用Tab菜單。今天我們要來分享一款垂直方向的Tab菜單，它是用純CSS3實現的，加載和切換特別靈活。另外，Tab菜單的樣式你可以使用CSS重新定義，擴展很方便。
、編碼格式：使用UTF-8
請確保您的編輯器使用的字符編碼為UTF-8，沒有字節順序標記。在html模板或文檔中通過meta來定義編碼格式。
6、注釋
根據需要解釋代碼，這個就不多說了，團隊開發這個非常重要，盡管很多時候大家不愿意遵守，但確實重要！
7、TODO待定項
尚未實現的或待定的內容一定要標識強調出來，利用TODO辨識，而非其他諸如@@來強調。在todo項中如果有必要列明聯系人，比如負責人。在TODO后追加一個冒號作為行動內容，例如TODO：為網站增加html5模板。
代碼和教案（訪問密碼：7567） 「鏈接」
教 學 內 容 | 行業柱狀圖的實現（二） | |||
教 學 目 標 | 知識目標:了解Echarts的定義和作用 能力目標:能夠引入Echarts完成柱狀圖效果的使用 素質目標:培養學生團結互助、熱愛祖國的綜合素質 | |||
重 點 | Echarts的定義和使用 | |||
難 點 | 行業柱狀圖效果的代碼編寫 | |||
教學方法 | 講授法、任務驅動法、啟發法 | |||
課堂教學進程 | 教學環節 | 教師活動 | 學生活動 | 設計理念 |
1、 課堂考勤、上節課知識點回顧、課后作用問題處理（10分鐘） 2、 課堂導入：柱狀圖效果的實現（5分鐘） 3、 新課內容：使用電子課件和效果演示工具的使用（20分鐘） 以練習案例的方式引導學生自己動手實現效果，感受代碼編寫（45分鐘） 4、總結課堂內容，布置作業（5分鐘） 5 | ||||
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
