们进行数据分析时，为了让数据分析的结果更好的呈现，我们会选择数据可视化。

地图可视化实现的工具有多种，我们今天就单挑两个一个是编程，一个是可以画Html5地图的可视化工具，这里拿亿信华辰的ABI为例子。

编程：

看看上海的地铁图。

文本提示

首先，把鼠标移到站点、路段、图标等位置，都会有文本提示弹出。

站点图标变化

当鼠标移到站点上时，站点图标做了放大效果，这个效果很贴心，

实现的方法也很简便，就是在注册站点矢量图形时，加入了动态判断。以下注册普通站点矢量图形的代码：

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;
    }
});

动画效果

从上图还可以看到，在换乘站图标中，除了增加了颜色，还实现了旋转效果。。 来看代码：

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

主干线图，世界航线线路一目了然~

标点地图，如对去过的城市进行标点着重突出。

渲染地图，可以看出投放资金的分布情况。

流向图，清晰的看出从各个地区流向北京的情况。

疫情大屏

可能你没想到，使用亿信ABI只需要简单的托拉拽就可以！不需要大串大串的代码就能轻松实现！还等什么呢！你也可以去体验！

多企业在进行数据分析设计的时候，都特别青睐于用地图来反映企业的营业收入情况，不仅有利于对于各个城市的营收情况，也能对地图进行不同颜色的渲染，以此达到预警的效果。

今天小编用亿信ABI给大家演示一遍如何设置html5地图来展示企业的营业收入情况。亿信ABI是亿信华辰自主研发的一款从数据源接入，到数据采集、数据处理，再到数据分析和挖掘，打通数据生命周期的各个环节，实现数据填报、处理、分析一体化的一站式数据分析工具。

1、在亿信华辰官网打开亿信ABI的试用版本，点击“数据分析”中的“图表分析”，在左侧的工具栏中添加统计图组件，选择html5地图类型，将柱状图组件以拖拽到方式添加到报表模板中：

双击组件出现统计图设置窗口，选择“统计图类型”后在左侧栏中找到“地图”这一项。选择你需要的地图类型，点击确定。

目前有5种类型的html5地图：流向图，主干线图，双线图，渲染图，标点图，3D地球。

2、html5地图类型介绍

（1）流向图：常用来可视化源汇流数据。源地和汇地可以是点，也可以是面。源地和汇地之间的互动数据，常用线段来表达，线的宽度或颜色来表示源地和汇地之间的流向数值，线段上可以使用自定义图片如箭头来表示流向方向。流向地图多应用于区际贸易、交通流向、人口迁移、购物消费行为、通讯信息流动、航空线路等场景。

（2）主干线图：带主干线的地图，用于查看地理位置信息之上定义的关系图。

（3）渲染图：地图按区域指标数值大小以不同的颜色渲染来展示和区分，以起到预警的作用。

（4）标点图：标点和地图的结合，我们以地图为背景，在上面标点。我们将标点展示在一个指定的地理区域内，标点里可以展示数值。

（5）3D地球：具3D效果的地球统计图，外形如地球仪，会自动缓慢旋转以展现世界地图的全貌。

此处以渲染图为例讲解制作过程，其他类型的制作流程都大同小异。

3、html5地图取数设置

重新回到工作区域，从右侧的“基础组件”中拖入一个分析区表格，在分析表拾取相应的主题表数据，根据地区维度浮动出指标值（设置“浮动维单元格”）。

双击“统计图”，在统计图设置中设置数据源，关联做好的分析表格，如图。

4、调整地图配色

为了让地图的效果更好，通常会先选择系统中提供的配色方案，然后再设置标题、微调背景墙壁、边框和填充等的颜色样式。如下图所示，选择需要的配色方案之后，在预览中就能看到地图的配色效果。

接着，可以在高级选项中，设置边框和填充色，其他微调设置就不一一介绍。

5、其他设置

可以同时使用标点图和渲染图：添加两个系列，分别选择不同的系列类型。

还可以选择地图类型：

最后保存，计算。

颜色偏蓝说明收入良好，偏黄说明状况不佳。

如果你对亿信华辰DEMO的效果感兴趣，可以去官网详细查看全新demo的技术解析，包括从导航页到数据等的深度呈现如何实现等技巧。

今天的教程就到这里吧！希望对你有帮助哦~勤加练习，探索更多的解决办法，彰显你的数据天赋！小伙伴们，加油吧！