整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
多企业在进行数据分析设计的时候，都特别青睐于用地图来反映企业的营业收入情况，不仅有利于对于各个城市的营收情况，也能对地图进行不同颜色的渲染，以此达到预警的效果。
今天小编用亿信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小时内与您取得联系。
