整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
注本頭條號(hào)，專注做前端。
之前分享過不少中國地圖的插件，大部分是排版出來的，比較不靈活， 并且排版工作量大 ，用canvas繪制中國地圖是一個(gè)非常不錯(cuò)的嘗試。
下面要分享的就是基于html5+canvas制作的中國地圖，用到了echarts.js , 可以靈活的用到項(xiàng)目中去。
//
們進(jìn)行數(shù)據(jù)分析時(shí)，為了讓數(shù)據(jù)分析的結(jié)果更好的呈現(xiàn)，我們會(huì)選擇數(shù)據(jù)可視化。
地圖可視化實(shí)現(xiàn)的工具有多種，我們今天就單挑兩個(gè)一個(gè)是編程，一個(gè)是可以畫Html5地圖的可視化工具，這里拿億信華辰的ABI為例子。
編程：
看看上海的地鐵圖。
文本提示
首先，把鼠標(biāo)移到站點(diǎn)、路段、圖標(biāo)等位置，都會(huì)有文本提示彈出。
站點(diǎn)圖標(biāo)變化
當(dāng)鼠標(biāo)移到站點(diǎn)上時(shí)，站點(diǎn)圖標(biāo)做了放大效果，這個(gè)效果很貼心，
實(shí)現(xiàn)的方法也很簡(jiǎn)便，就是在注冊(cè)站點(diǎn)矢量圖形時(shí)，加入了動(dòng)態(tài)判斷。以下注冊(cè)普通站點(diǎn)矢量圖形的代碼：
twaver.Util.registerImage('station',{
w: linkWidth*1.6,
h: linkWidth*1.6,
v: function (data, view) {
var result = [];
if(data.getClient('focus')){
result.push({
shape: 'circle',
r: linkWidth*0.7,
lineColor: data.getClient('lineColor'),
lineWidth: linkWidth*0.2,
fill: 'white',
});
result.push({
shape: 'circle',
r: linkWidth*0.2,
fill: data.getClient('lineColor'),
});
}else{
result.push({
shape: 'circle',
r: linkWidth*0.6,
lineColor: data.getClient('lineColor'),
lineWidth: linkWidth*0.2,
fill: 'white',
});
}
return result;
}
});
動(dòng)畫效果
從上圖還可以看到，在換乘站圖標(biāo)中，除了增加了顏色，還實(shí)現(xiàn)了旋轉(zhuǎn)效果。。 來看代碼：
1. twaver.Util.registerImage('rotateArrow', {
2. w: 124,
3. h: 124,
4. v: [{
5. shape: 'vector',
6. name: 'doubleArrow',
7. rotate: 360,
8. animate: [{
9. attr: 'rotate',
10. to: 0,
11. dur: 2000,
12. reverse: false,
13. repeat: Number.POSITIVE_INFINITY
14. }]
15. }]
16. });億信ABI
主干線圖，世界航線線路一目了然~
△主干線圖
標(biāo)點(diǎn)地圖，如對(duì)去過的城市進(jìn)行標(biāo)點(diǎn)著重突出。
△標(biāo)點(diǎn)地圖
渲染地圖，可以看出投放資金的分布情況。
△資金投放分布圖
流向圖，清晰的看出從各個(gè)地區(qū)流向北京的情況。
△流向地圖
疫情大屏
可能你沒想到，使用億信ABI只需要簡(jiǎn)單的托拉拽就可以！不需要大串大串的代碼就能輕松實(shí)現(xiàn)！還等什么呢！你也可以去體驗(yàn)！
多企業(yè)在進(jìn)行數(shù)據(jù)分析設(shè)計(jì)的時(shí)候，都特別青睞于用地圖來反映企業(yè)的營業(yè)收入情況，不僅有利于對(duì)于各個(gè)城市的營收情況，也能對(duì)地圖進(jìn)行不同顏色的渲染，以此達(dá)到預(yù)警的效果。
今天小編用億信ABI給大家演示一遍如何設(shè)置html5地圖來展示企業(yè)的營業(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)打開億信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）流向圖：常用來可視化源匯流數(shù)據(jù)。源地和匯地可以是點(diǎn)，也可以是面。源地和匯地之間的互動(dòng)數(shù)據(jù)，常用線段來表達(dá)，線的寬度或顏色來表示源地和匯地之間的流向數(shù)值，線段上可以使用自定義圖片如箭頭來表示流向方向。流向地圖多應(yīng)用于區(qū)際貿(mào)易、交通流向、人口遷移、購物消費(fèi)行為、通訊信息流動(dòng)、航空線路等場(chǎng)景。
（2）主干線圖：帶主干線的地圖，用于查看地理位置信息之上定義的關(guān)系圖。
（3）渲染圖：地圖按區(qū)域指標(biāo)數(shù)值大小以不同的顏色渲染來展示和區(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)世界地圖的全貌。
此處以渲染圖為例講解制作過程，其他類型的制作流程都大同小異。
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)說明收入良好，偏黃說明狀況不佳。
如果你對(duì)億信華辰DEMO的效果感興趣，可以去官網(wǎng)詳細(xì)查看全新demo的技術(shù)解析，包括從導(dǎo)航頁到數(shù)據(jù)等的深度呈現(xiàn)如何實(shí)現(xiàn)等技巧。
今天的教程就到這里吧！希望對(duì)你有幫助哦~勤加練習(xí)，探索更多的解決辦法，彰顯你的數(shù)據(jù)天賦！小伙伴們，加油吧！
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
