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